前端适配之细说rem（网易的移动端页面布局做法）
rem指的是根元素的字体大小，多数根元素大小为16px,但设备的dpi会影响根元素的大小，因此并不是固定的。
所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小，然后所有的元素尺寸都以rem为单位来写。
使用rem布局结合在html上根据不同分辨率设置不同font-size有很多不好解决的麻烦,那应该如何解决呢？我们可以通过JS来计算不同分辨率下，font-size的大小，这是在我研究了网易的移动端布局之后得出的结论。
下图是网易在分辨率为320*680，375*680，414*680，500*680时，html的font-size尺寸
它是根据什么计算的，这就跟设计稿有关了，拿网易来说，它的设计稿应该是基于iphone4或者iphone5来的，所以它的设计稿竖直放时的横向分辨率为640px，为了计算方便，取一个100px的font-size为参照，那么body元素的宽度就可以设置为width: 6.4rem，于是html的font-size=deviceWidth / 6.4。这个deviceWidth就是viewport设置中的那个deviceWidth。根据这个计算规则，可得出本部分开始的四张截图中html的font-size大小如下：
deviceWidth = 320，font-size = 320 / 6.4 = 50px deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px deviceWidth = 500，font-size = 500 / 6.4 = 78.125px
这个6.4怎么来的，当然是根据设计稿的横向分辨率/100得来的。
这个deviceWidth通过document.documentElement.clientWidth就能取到了，所以当页面的dom ready后，做的第一件事情就是：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
下面总结网易的这种做法：
第一步移动端视口的设置：<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
第二步：
（1）先拿设计稿竖着的横向分辨率除以100得到body元素的宽度：
如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem 如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem
（2）布局时，设计图标注的尺寸除以100得到css中的尺寸，比如下图：
播放器高度为210px，写样式的时候css应该这么写：height: 2.1rem。之所以取一个100作为参照，就是为了这里计算rem的方便！
（3）在dom ready以后，通过以下代码设置html的font-size:
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
6.4只是举个例子，如果是750的设计稿，应该除以7.5。
font-size可能需要额外的媒介查询，并且font-size不能使用rem，如网易的设置：
@media screen and (max-width:321px){
.m-navlist{font-size:15px}
}
@media screen and (min-width:321px) and (max-width:400px){
.m-navlist{font-size:16px}
}
@media screen and (min-width:400px){
.m-navlist{font-size:18px}
}
另外，当deviceWidth大于设计稿的横向分辨率时，html的font-size始终等于横向分辨率/body元素宽：
640*680
641*680
之所以这么干，是因为当deviceWidth大于640时，则物理分辨率大于1280（这就看设备的devicePixelRatio这个值了），应该去访问pc网站了。事实就是这样，你从手机访问网易，看到的是触屏版的页面，如果从pad访问，看到的就是电脑版的页面。
var deviceWidth = document.documentElement.clientWidth; if(deviceWidth > 640) deviceWidth = 640; document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';//这里也可以改成跳转PC端网站
最后打个广告，本人创建了一个前端技术qq群399627992，有兴趣的可以加一下，一起学习一起进步
