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

 

 

步骤：

　　1.根据设计稿尺寸完成页面；

　　2.设置meta，控制视口宽度，让页面以1:1比例渲染页面

　　3.动态设置html的font-size；

　　4.把各元素的px值除以100转换为rem（字体除外）

 

网易方案关键代码：

    设置视口：　

    动态设置html的font-size：

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

 

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

淘宝rem方案：

(1)根据设计稿尺寸完成页面切图。

(2)通过JS获得当前设备的DPR值，然后动态设置meta的scale值。scale值为缩放值，控制页面的渲染比例。

　  假设当前设计稿宽为750px的Ipone6设计稿，我们也按照这个尺寸实现了页面。如果当前打开页面的设备为Iphone6(以下简称IP6)，IP6的设备宽度为375px，让375px的视口宽度也实现750px的页面肯定是装不下的(显示不完全，有滚动条)。

　  所以我们需要动态设置meta的scale值，通过scale值改变当前的视口宽度。虽然当前的设备宽度仍然为375px，但是我们通过DPR值控制了当前的视口宽度为：

    

　  这就相当于我们把750px的页面放到了750px的设备(通过改变scale值模拟出来的视口)中打开，然后透过375px的设备(当前打开页面的设备)去观看(注意：这里是观看，不是渲染。) 页面。

(3)动态设置html的font-size：

　　　　“淘宝公式”：

　　　　　　　　　　　　 

　　　　假设当前打开的设备为IP6：

　　　　　　　　　　　　

　　　　假设当前打开的设备为IP5：

　　　　　　　　　　　　

(4)把各元素的设计稿尺寸从px转换为rem：

　　　　　　　　　　　　

　　　　假设当前以IP6为设计稿实现的页面，其中一元素的宽度为150px，

　　　　根据以上分析可得，当前：

　　　　　　　　　　　　　　

　　　　把150px转为rem得：

　　　　　　　　　　　　　　　　

　　　　再假设当前打开页面的设备为IP5，可得：

　　　　　　　　　　　　　　　　

　　　　那么150px的元素在当前页面显示的真实尺寸应该为：

　　　　　　　　　　　　　　　　

　　　　又得：

　　　　　　　　　　　　　　　　

　　　　通过比例可知当前页面在不同设备之间实现了等比例缩放，就算再放到其它的手机也一样会根据动态算出的scale值实现等比例的缩放。

 

 

 

 

总结：