zoukankan      html  css  js  c++  java
  • web页面的适配问题

    一个web页面既要在宽屏上显示,又要在窄屏上显示,既要在电脑上显示,又要在手机上显示,这个适配问题相当的麻烦。

    其实解决电脑与手机的适配问题,一般有两个思路;一个是做判断,根据不同条件在css和js做相应的修改,一个是直接做两版,手机版和电脑版,手机版略精简。

    1.宽屏与窄屏

    由于现在宽屏电脑越来越频繁,所以如果再将内容宽度设为960就太不能满足要求了,所以将内容宽度设了两版分别为1190px和960px。

    所有内容的外面包一个<div class="width-broad" id=“width-content”></div>这样,通过判断屏宽来修改class的值,达到修改样式的目的

    js如下

    <script type="text/javascript">
    
    var bc=document.getElementById("banner-content");
    
    if(parseInt(window.screen.availWidth) < 1190){
          
          bc.className="width_narrow";
    }else{
        
          bc.className="width_broad";
    }
    
    </script>

    css如下

    /*控制宽度的类*/
    .width_broad{width:1190px;margin:0px auto;}
    .width_narrow{width:960px;margin:0px auto;}

    然后,div里面的内容宽度最好用百分比,这样在内容宽度更改到960的时候,对应的内容会一并缩小。

    在这样做的过程中,不知为什么小屏电脑的右侧会多出条空白条,因此屏幕下方就多了一个水平滚动条,本来应该没有这个水平滚动条的,所以我的解决办法是,在body的样式中增加一个属性如下:

    body{overflow-x:hidden;}

    这样电脑的适应问题基本解决了。

    2.手机的适配问题

    手机的屏宽一般分为

    480*320     568*320   苹果

    640*480

    800*480

    854*480

    1280*720

    1280*800

    由于web页在手机上显示会做等比例缩小,所以在手机上显示的页面应该是宽为960的页面的等比例缩小。

    这样,我在途中又遇到一个问题,就是当页面等比例缩小后页面的高度<手机屏幕的高度,这样手机屏幕的底部会出现一块空白,所以我的解决方法是通过判断是否是缩小后在手机上显示,如果是就在给它设置一套样式,使得他的页面高度>=手机屏幕的高度。

    js如下:

    <script type="text/javascript">

    if
    (parseInt(window.screen.width) <=800){//边界点选为800是因为,屏幕宽度小于等于800的都是手机,都经过了等比例缩放 $("#width-content passage").css("padding","100px"); $("#width-content .title_name").css("font-size","40px"); $("#width-content .detail").css("font-size","20px"); $("#width-content .detail").css("line-height","40px"); }
    </script>
     

    这样,屏幕底部的空白就消失了。

    通过以上的解决后,仍然存在一个问题,那就是在屏幕竖着放的时候内容中的文字图片等仍然看起来较吃力,解决办法就是可以将屏幕横过来,这样看起来刚刚好。

    以上就是我解决适配问题的方法,如有更好的办法,请留言。。

  • 相关阅读:
    使用Xshell为xftp开ssh通道代理
    linux下查找svn的相关目录的命令
    linux服务器A远程连接服务器B的mysql及1045错误
    怎样下载带权限认证的文件?
    Vue项目打包部署总结
    Vue项目打包压缩:让页面更快响应
    axios请求失败自动重发
    可用的后台管理系统
    vue组件间方式总结
    非脚手架创建vue项目,并使用webpack打包
  • 原文地址:https://www.cnblogs.com/xiaoyueer/p/3504648.html
Copyright © 2011-2022 走看看