我们只需以iPhone6的设计稿（当前主导的机型），750px宽完成一套页面，通过JS获取当前设备的DPR值并动态设置meta的scale值。当去到其他设备时，因为我们用的都是rem值，只需要通过JS动态获得当前的dw，再通过动态获取的dw改变html的font-size值，页面的其他元素也会因为html的改变而进行等比例缩放。

 

淘宝方案关键代码：

    动态设置viewport的scale：　

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

    以上实则只是在动态设置meta的scale

<meta content="initial-scale=scale,maximum-scale=scale, minimum-scale=scale">

    动态设置html的font-size：

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

——————————————————————————————————我是华丽的分割线———————————————————————————————————

对比网易与淘宝的解决方案：

 

共同点：

　　　　  1.都是先根据设计稿，按设计稿原始尺寸完成整套页面，然后采用rem转换实现一稿解决所有适应。

　　　　2.都需要动态设置html的font-size属性，但公式不同。

　　　　3.布局时各元素的尺寸值都是根据设计稿标注的尺寸计算出来，由于html的font-size是动态调整的，所以能够在不同的设备等比变化。

　　　　4.容器元素的font-size都不用rem，需要额外做font-size的媒体查询。

 

不同点：

　　　　1.网易通过设置meta，控制视口宽度为设备宽度，让页面以1:1比例渲染；

　　　　 淘宝通过动态设置meta的scale，把视口宽度控制为设备的真实设计稿宽度。

　　　 2.运算公式不同：

　　　　　　　　　　　　html的font-size运算：

　　　　　　　　　　　　　　　　　　　　网易:；

 

　　　　　　　　　　　　　　　　　　　　淘宝：；

 

　　　　　　　　　　　　　  rem的转换：

　　　　　　　　　　　　　　　　　　网易：把各元素按设计稿的px值除去100转换为rem；

　　　　　　　　　　　　　　　　　　淘宝：各元素rem=设计稿对应px值/html的font-size；

 

　　　　　3.解决思路不同：

　　　　　　　　　　　　网易：把750px的页面等比例转换，压缩在375px的设备显示；

　　　　　　　　　　　　淘宝：把750px的页面放到虚拟的750px视口渲染打开，再透过375px的设备查看页面。

 

备注：本案例分析统一以Iphone6为设计原稿。

 

　　以上就是博主对于移动开发rem使用的一些个人浅见啦，希望能对大家有所帮助吧，说得不好的地方也劳烦各位大神不吝赐教o(╯□╰)o。

 

如果你不知道什么是rem：请点击飞机票;

如果你对于移动web完全没概念： 请点击飞机票1  请点击飞机票2