移动端rem原理

参考文章一
参考文章二
参考文章三

一、什么是rem?

---

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个  
相对单位。  

em是什么呢？

em（font size of the element）是指相对于父元素的字体大小的单位。 

二、rem如何进行适配呢？

---

rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制  
rem的大小。   

三、相关知识介绍

---

（一）viewport

<meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  

这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小，也就是device-width。

四、rem的实现原理

---

（一）淘宝的实现方法

1. 通过dpr设置缩放比，实现布局视口大小.

device-width=设备的物理分辨率/(devicePixelRatio * scale)
devicePixelRatio称为设备像素比
为了保证页面的大小与设计稿保持一致,缩放比=1/dpr

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

2.动态计算html的font-size,font-size = deviceWidth / 10： deviceWidth为视窗宽度

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + ‘px’；  

这里的意思是，clientWidth / 10 得到是布局视口下的rem基准值（以iphone6为例 1rem＝75px），那么设计稿正好也是 750，所以对应的关系 clientWidth / 10＝＝设计稿的尺寸/x, 那么x=设计稿的尺寸/rem基准值。
如果是iphone6 plus rem基准值等于clientWidth / 10 等于124.2，那么x＝750/124.2。

布局的时候，各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10

完整代码在这里

具体代码解析

具体代码解析参考这里

（二）网易的实现方法

1.将布局适口设置为视觉视口，不进行缩放，即理想视口。

<meta name="viewport"content="initial-scale=1,maximum-scale=1, minimum-scale=1”>

2.动态计算html的font-size

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

为什么是6.4呢？

• 先拿设计稿竖着的横向分辨率除以100得到body元素的宽度：

如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem
如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem

• 布局时，设计图标注的尺寸除以100得到css中的尺寸

播放器高度为210px，写样式的时候css应该这么写：height: 2.1rem。之所以取一个100作为参照，就是为了这里计算rem的方便！

3.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}
}

(三)比较淘宝和网易的做法

使用rem布局，实质都是通过动态改写html的font-size基准值，来实现不同设备下的良好统一适配；

网易与淘宝不同 的地方是 ，网易将布局视口设置成了 视觉视口，淘宝将布局视口设置成了物理像素大  
小，通过 scale缩放嵌入了 视觉视口中；

容器元素的字体大小都不使用rem，需要额外的media查询；