详聊移动端rem的适配问题

现在移动端对于前端行业来说特别流行，废话不多说，那我们就来聊聊移动端的哪些事？

写移动端必须在html页面head标签内加一个meta标签—viewport视口 
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

来简单说说rem原理：

rem=root element 根元素 rem是来获取html(根元素)的fontSize值的 
1rem=16px(16px是谷歌浏览器默认的)

做移动端常用布局方式：

流式布局(百分比布局)+rem布局

移动端设计稿的尺寸：

• 640x1136的宽度(单屏的页面) 参照iphone5 手机分辨率:320*2
• 750x1334的宽度(单屏的页面) 参照iphone6 手机分辨率:375*2
• 1242*2208的宽度(单屏的页面) 参照iphone6 plus 手机分辨率:414*3 

单屏页面常用在场景应用的H5页面中(活动页面)

手机分辨率：(iphone手机的机型)

• iphone4 320x480 dpr 2.0
• iphone5/5s 320x568 dpr 2.0
• iphone6 375x667 dpr 2.0

• iphone6 plus 414x736 dpr 3.0

  做移动端需要适配哪些机型？

  按照iphone为例(原因：设计图是参照iphone手机来做的)

• iphone4/4s/5/5s 尺寸：320
• iphone6/6s/7 尺寸：375
• iphone6plus 尺寸：414
• 640px 尺寸：大于等于640px的

适配移动端，来获取fontSize值

用媒体查询静态获取fontSize值

设计稿尺寸：640   参照iphone5   分辨率：320*2   dpr2.0
iphone4/4s/5/5s  分辨率320
    html{ font-szie:50px; }

iphone6/6s 375  
    @media all and (min-width:375px){ html{ font-size:58.59375px; } }

iphone6p 414
    @media all and (min-width:414px){ html{ font-size:64.68755px; } }

640尺寸
    @media all and (min-width:640px){ html{ font-size:100px; } }

设计稿尺寸750  参照iphone6  分辨率：375*2   dpr:2.0
iphone6  375
    html{ font-szie:50px; }

iphone4/4s/5/5s 320
    @media all and (min-width:320px){ html{ font-size:42.66px; } }

iphone6plus 414
    @media all and (min-width:320px){ html{ font-size:55.2px; } }

尺寸640
    @media all and (min-width:640px){ html{ font-size:85.33px; } }

##用JS来动态获取fontSzie值

引入JS方式：内嵌式–在html页面中创建一个script元素(标签)，把JS代码放在script元素内

第一种方法：　

<script>

/*动态设置像素比*/
var iScale = 1;
iScale = iScale / window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '">')
/*动态设置文字大小*/
function resize(){
    var iWidth = document.documentElement.clientWidth;   　　　　  　　document.getElementsByTagName('html')[0].style.fontSize = iWidth / 16 + 'px';
}
resize();
</script>

第二种方法：

<script>　　　　　　　　　　　　　
function setFontSize() {
    var deviceWidth = document.documentElement.clientWidth;
    if (deviceWidth > 640) {
           　deviceWidth = 640;
    }    　　　　　　　　  document.documentElement.style.fontSize = deviceWidth / 6.4 + "px";
}
var _t = null;
window.addEventListener("resize", function () {
    clearTimeout(_t);
    _t = setTimeout(setFontSize, 100);
}, false);
setFontSize();
})(window);
</script>

为什么把html的fontSize值设置成100px呢？

• 默认1rem=16px,引申出来的计算公式 1rem=100px
• 利于计算方便

怎么计算成rem单位？

比如设计图里面有个按钮，是100px*30px的，计算成rem单位为100/100=1rem、30/100=0.3rem 所以计算出的宽高为1rem*0.3rem(所有的像素px单位都要除以100，因为我们把html的fontSize值设置成了1rem=100px)

以上方法，只适合用于移动端