如风似我

移动端适配以及百分比布局与rem比较

pc端网站与移动端(手机)网站区别

PC端:屏幕尺寸大,显示内容多,结构复杂,缩小浏览器窗口,页面内容结构并不会发生改变,也并不是响应式
移动端(手机网站):屏幕尺寸小,显示的内容有限,结构清晰,简洁,设备类型(ipad,iphone5,6,安卓等)繁多,页面内容结构自适应变化,随着浏览器窗口缩小而缩小,放大而放大,等比例缩放
相同点:利用html+css(包括css3)+javascript,pc端性能优化同样适用于移动端策略
不同点:

移动端的网络速度手机用户大多是通过2G,3G,4G网络来上网,网络速度远低于大部分PC常用的有线网络的,所以移动端网页如果过大,加载时间就会越长,会增加网页访问的跳出率,对于移动端来说,所有的加载速度必须在1秒之内,所以移动端的性能优化必须要考虑的问题,包括图片加载,文件大小等,具体性能优化,可参考往期,不可不知的前端性能优化文章
PC端上,页面的交互都是鼠标点击,滚轮等操作,而在手机上,都是手指触屏,滑屏操作,页面元素上的按钮,链接等也要大小适中,适合手指点击,在事件处理上也有很大的区别
PC端兼容性繁多(三个祖中ie678得供着),而移动端无需考虑,更新快,对h5新增的属性,兼容性都很好,顶多加上webkit内核前缀,但是这并不意味着在各个手机浏览器显示相同,什么UC,QQ浏览器仍然是需要特殊兼容性处理的
pc端,页面布局,设计稿多大,基本上按照psd文档,按照1:1切图,固定宽度,高度,图片已切出来的实际尺寸大小进行填充即可,但是在移动端上,则不行,手机端的分辨率比较高,至于这个分辨率(它指的是显示屏横纵能够容纳的像素点,比如1366x768)表示的是横向能容纳1366个像素点,而纵向能容纳768个像素点,分辨率越高,像素点越多,图片就越清晰
在pc端,1px像素和浏览器端的像素可以一一对应,按照设计师给出的psd文档按照1:1的方式来做就行了,ps软件中,量出多大的尺寸,对应的css里面就设置多少像素,而在移动端,设备屏幕尺寸比较小,分辨率比较大,比如提高分辨率原先320到640的或者750,960的，提高到两倍，三倍，但是提高之后,css的像素还是依然没有改变,在pc端是一个像素,而到移动端,可能就是两像素,三像素,所以一般针对移动端的设计稿,常见的做法事,从设计稿量中量出来的尺寸,切出来图,在实际给元素设置尺寸时,都应对应的减半(2:1,或者3:1)的方式进行设置尺寸(比如设计稿是960,750,640的的图,那么减半就是320,375,320的),页面中字体,图片对应减半设置即可
新的API,获取元素的方法,比如document.querySelector(),document.querySelectorAll(),虽然在性能上不如旧的选择器,但是用着方便,一些移动端框架用该选择器比较多,比如jQuery Mobile，sui Mobile,mui等
pc端的事件不适合在移动端用,比如click(会有300毫秒延迟),移动端上用ontouchstart(手指按下),ontouchmove(手指移动),ontouchend,但是注意的是在Google模拟器下使用on的方式添加touch事件会无效,具体怎么解决这种问题,可以通过addEventListener()的绑定方式,注意用此方法监听事件时,就不要带on,具体见下代码所示
针对移动端一像素偏差问题,与像素比有关系,也就是所谓的物理像素(分辨率)与独立像素(屏幕的宽度),pc端一像素就是一像素,但是在移动端1像素,有时就不是一像素,也许是两像素,三像素的
- 通过添加伪类的方式,同时改变transform:scale(0.5),缩小为一半
- 设置div宽度为1像素,同时设置IE怪异盒模型,box-sizing:border-box
- 一像素的背景图片替代
手机网站不适合用作响应式,比如:bootstrap等,因为它很重,不轻量,在pc端网络带宽下加载还是可以的,但是在移动端,就很耗性能来,耗流量,耗电..太过于臃肿,而影响网页的加载
布局方面,移动端,少用浮动,会破坏文档流,不易拓展,多用Flex布局,移动端上Ie怪异盒模型也是很常用,对于改变元素位置,通常用translate,而不用定位,改变left,top值
PC端上,用固定像素值px作为元素设置尺寸单位,而在移动端,通常用rem(root 根节点根据html的字体大小计算其他元素尺寸),或者100%,
...

为什么要做适配

为了适应各个移动终端设备屏幕尺寸,完美的呈现应有的布局效果
手机端上的响应式不能用在手机app上,非常耗性能,耗流量,耗电
各个移动端设备,分辨率大小不一致,网页铺满整个屏幕,并在各种分辨下等比例缩放,不失真
h5页面直接可以在安卓,ios上引用(也就是所谓的混合hybrid App,指的是开发一个App一部分功能用native构建,一部分功能用html5构建,套壳,比如:phoneGap(Cordova))

怎么做适配,有哪些适配方案

流式布局,视口(viewport)宽度与设备等宽,做自适应,100%或者具体像素值
固定高度,宽度百分比适配,flex布局,这种方式比较适合布局均匀,适合100%布局,内容结构不复杂
固定宽度,设定一个标准值(比如以640为准),改变缩放比例(动态的创建meta标签,改变缩放比例)
rem做适配,在不同的设备上显示不同的效果
像素比适配:像素比 = 物理像素/独立像素(这种比较繁琐,难以理解,以后再详谈)

用100%布局适配

适合页面内容结构均匀分配,固定高度,结构不是很复杂,注意要设置viewport视口内容宽度等于设备的宽度
如下示例代码如下
html内容结构样式代码




  
  
  固定高度,宽度自适应,100%比做适配
  


    
    
            左边
            
                
                     
                
            
            右边
    
    
    
    adv
    
    
    
            1 
            2
            3
            4
            5  
    
    
            6 
            7
            8
            9
            10  
    
     
    
    
            左边80%
            右边20%

Flex布局适配,最为强大

同样是适合页面内容结构均匀分配,固定高度,注意要设置viewport视口内容宽度等于设备的宽度

老版本的display:box与新版本的display:flex都可以实现页面的自适应
示例代码如下所示
用老版本display:box弹性盒子布局示例代码如下




 
 
 display:box实现页面的自适应
 


     
           左边
           
                   
                        
                   
           
           右边
     
     
     
            1
            2
            3
            4
            5
     
     
            6
            7
            8
            9
            9

新版本的弹性盒模型实现页面自适应
html内容结构代码

css层叠样式代码

*{
    padding:0;
    margin:0;
}
body{
    font-family:"微软雅黑";
    font-size:16px;
}
.parent{
    display:-webkit-flex;     /*声明弹性盒模型*/
    display:flex; 
}
.left,.right{
    width:40px;
    height:40px;
    text-align:center;
    line-height:40px;
}
.left{
    background:#abcdef;
}
.right{
    background:#DD4F43;
}
.center{
    -webkit-flex:1; /*一定要注意加上浏览器前缀,否则就会失效*/
    flex:1;
}
.center input{
    width:100%;
    height:40px;
    outline:none;
}
.banner-adv{
    width:100%;
    height:200px;
    display:-webkit-box;
    display:box;
    background:#0D6CB0;
}
.list{
    width:100%;
    height:90px;
    display:-webkit-flex;
    display:flex;
}
.list div{
    -webkit-flex:1;
    flex:1;
    text-align:center;
    line-height:90px;
}
.list div:nth-of-type(1){
    background:#DE5246;
}
.list div:nth-of-type(2){
    background:#19A25F;
}
.list div:nth-of-type(3){
    background:#FF8080;
}
.list div:nth-of-type(4){
    background:#F4CD0B;
}
.list div:nth-of-type(5){
    background:#9EDA45;
}
.list-Two{
    margin:15px 0 0 0;
}
.list-Two div:nth-of-type(1){
    background:#B847FF;
}
.list-Two div:nth-of-type(2){
    background:#79B900;
}
.list-Two div:nth-of-type(3){
    background:#FF2424;
}
.list-Two div:nth-of-type(4){
    background:#D2E4F0;
}
.list-Two div:nth-of-type(5){
    background:#4CDF2B;
}
.con{
    height:200px;
    display:-webkit-flex;  /*声明弹性盒模型*/
    display:flex;
}
.con div:nth-of-type(1){
    -webkit-flex:8;   /*根据父元素分成8等分,占80%*/
    flex:8;
    background:#80B3FF;
}
.con div:nth-of-type(2){
    -webkit-flex:2;   /*根据父元素分成2等分,占20%*/
    flex:2;
    background:#CD8B37;
}

固定宽度,设定一个标准值(比如以640为准),改变缩放比例(动态的创建meta标签,改变缩放比例)

固定宽度,viewport缩放(width=640)量的是640px,但是实际上缩小2倍就可以了的

自己设置一个640等宽度,然后进行等比例缩放(目前低版本的安卓不支持) 让640px像素的东西,缩放到iphone5 320的尺寸当中去,怎么个缩放呢,让宽度等比例缩放,高度自适应,所以这样看起来就不会失真,让宽高度等比例的缩放,按照640来进行切图

viewport:视口宽度,设备的屏幕上能用来显示我们的网页的那一块区域()浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域)

content:描述视口内容,width=device-width,网页内容宽度等于设备的宽度

initial-scale:()初始缩放比例),能够起到和width=device-width相同的效果(把理想的视窗设置为设备宽度),两个配合使用能够很好的解决移动端各设备的适配问题

maximum-scale:最大缩放比例

minimum-scale最小缩放比例

user-scaleable:如果值是0或者no,表示禁止用户手指缩放

html内容结构

 
      ![](img/06chugui.jpg)
      ![](img/07shoubiao.jpg)
      ![](img/08zhoumojiadain.jpg)
      ![](img/09junzi.jpg)

css层叠样式

*{
    padding:0;
    margin:0;
}
div{
    width:640px;
}
img{
    width:100%;
    display:block;
}

js代码

 /*
 * 固定页面的尺寸,做一个640的页面为标准,然后进行等比例缩放,整个页面会跟着宽度等比例缩放
* @function scaleFun 等比例缩放函数
* @Object {Number} screenWidth:获取window屏幕的宽度
* @number fixedWidth 设置页面固定宽度
* @number {scale} 缩放比例,屏幕(设备)的宽度/固定的宽度
* @Object {createMeta} 动态的创建meat标签元素
* @Object {metaAttr} 定义一个对象,设置添加属性
* @for..in循环,将metaAttr的属性添加到createMeta中去
* @将meta标签添加到head头部中去
*/
 window.onload = function(){
    // 等比例缩放函数
   function scaleFun(){
     var screenWith = window.screen.width; // 获取window屏幕的宽度
     var fixedWidth = 640;    // 固定宽度
     var scale = screenWith/fixedWidth;  //缩放比例 window屏幕的宽度/固定宽度,这里的640看设计图纸给的像素,如果是750那么就写750,计算缩放比
     var createMeta = document.createElement("meta");// 动态的创建meta标签 
     // 设置属性
     var metaAttr = {
        name:"viewport",
        content:'width='+fixedWidth+', initial-scale='+scale+', maximum-scale='+scale+', user-scalable=no'
     }
    for(var key in metaAttr){
        createMeta[key] = metaAttr[key];
    }
    // 将createMeat添加到head头中
document.getElementsByTagName("head")[0].appendChild(createMeta);
/*
createMeta.setAttribute('name','viewport');                                               createMeta.setAttribute('content','width='+fixedWidth+', initial-scale='+scale+', maximum-scale='+scale+', user-scalable=no');
document.getElementsByTagName('head')[0].appendChild(createMeta);
*/
}
scaleFun();                     
}

rem做适配,在不同的设备上显示不同的效果

根据不同屏幕设备分辨率动态设置html的文字大小,达到等比缩放的功能
在不同的移动终端显示不同的元素等比例缩放效果
把设计图的宽度分成多少分之一,根据实际情况,不是你想分成多少就多少,一般10等分,16,20等分的
保证html最终算出来的字体大小,不小于12px(Google浏览器下,最小字体大小为12px,设置像素值小于它,仍是12px,但是在firefox浏览器下小于12px,仍然是可以减小生效的,太小了字体看不清,影响用户体验)
html内容结构

  欢迎关注微信itclan公众号
  
        ![](img/06chugui.jpg)
        ![](img/07shoubiao.jpg)
        ![](img/08zhoumojiadain.jpg)
        ![](img/09junzi.jpg)

css层叠样式
less预处理器

@rem:40rem   // 这里的rem怎么确定,根据你设计稿尺寸,根据有js中把网页(设计图)分成多少等分,动态的设置html根节点的大小,这里分成16等分,比如设计稿是640那么1rem就等于640/16=40px,如果设计稿是320,同理320/16=20
*{
    padding:0;
    margin:0;
}
body{
    overflow-x:hidden;
}
div.imgList{
    width:720/@rem;
}
img{
    display:block;
}
div.spanText{
    text-align:center;
    font-size:40/@rem;
}

编译出来的对应的css

*{
   padding:0;margin:0
}
body{
   overflow-x:hidden
 }
 div.imgList{
    width:18rem
 }
 img{
    width:18rem;
    display:block
 }
 div.spanText{
    text-align:center;
    font-size:1rem
}