网易的rem布局

首先我们要知道，当设备为pad的时候，应当访问PC版的网站。

网易的移动端高清做法：

（1）先拿设计稿竖着的横向分辨率除以100得到body元素的宽度
如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem
如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem

（2）布局时，设计图标注的尺寸除以100得到css中的尺寸；
例如某个元素高度是200px，则css样式应该写成height：2rem（除以100好计算）；

（3）在dom ready以后，通过以下代码设置html的font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px'；
6.4只是举个例子，如果是750的设计稿，应该除以7.5。

（4）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}
}

最后还有2个情况要说明：
第一，如果采用网易这种做法，视口要如下设置

第二，当deviceWidth大于设计稿的横向分辨率时，html的font-size始终等于横向分辨率/body元素宽；之所以这么干，是因为当deviceWidth大于640时，则物理分辨率大于1280（这就看设备的devicePixelRatio这个值了），应该去访问pc网站了。事实就是这样，你从手机访问网易，看到的是触屏版的页面，如果从pad访问，看到的就是电脑版的页面。如果你也想这么干，只要把总结中第三步的代码稍微改一下就行了：
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

文章出处：http://www.cnblogs.com/lyzg/p/4877277.html