一、小程序
规定屏幕宽度为20rem；1rem = (750/20)rpx ； 一行750rpx ； 1rpx = 0.5px ； 基于iPhone6 的设计稿，实际屏幕375px ； 基于iphone4或者iphone5，实际屏幕宽度340px=640rpx，根据设计情况计算
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
二、理解淘宝、网易适配做法
网易的做法整理：
设计稿是基于iphone4或者iphone5来的,横向分辨率为640px,这时取一个100px的font-size为参照，那么body元素的宽度就可以设置为width: 6.4rem，于是html的font-size=deviceWidth / 6.4。deviceWidth就是viewport设置中的那个deviceWidth（通过document.documentElement.clientWidth可以取到），当我们DOM准备好后，第一件做的事情就是：document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + ‘px’;（6.4是根据设计稿的横向分辨率/100得来的）,具体分以下步骤：
1、先拿设计稿竖着的横向分辨率除以100得到body元素的宽度：
如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem
2、布局时，设计图标注的尺寸除以100得到css中的尺寸
3、在dom ready以后，通过以下代码设置html的font-size:
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4（如果是750的设计稿，应该除以7.5） + ‘px’;
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}}
5、视口设置：
<meta name=”viewport” content=”initial-scale=1,maximum-scale=1, minimum-scale=1″>
6、当deviceWidth大于设计稿的横向分辨率时，html的font-size始终等于横向分辨率/body元素宽：
增加一个判断来判断当前视口的宽度
var deviceWidth = document.documentElement.clientWidth;if(deviceWidth > 640) deviceWidth = 640;document.documentElement.style.fontSize = deviceWidth / 6.4 + ‘px’;
优点：一开始设置100px=1rem，利于计算
淘宝做法整理：
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>，
原理：js动态改变scale
，device-width=设备的物理分辨率/(devicePixelRatio * scale)，在scale为1的情况下，device-width = 设备的物理分辨率/devicePixelRatio 。（devicePixelRatio称为设备像素比）
原理：js动态改变scale
，device-width=设备的物理分辨率/(devicePixelRatio * scale)，在scale为1的情况下，device-width = 设备的物理分辨率/devicePixelRatio 。（devicePixelRatio称为设备像素比）
设计稿是基于iphone6来的,横向分辨率为750px,
1、动态设置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’);
2、动态计算html的font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + ‘px’;
3、布局的时候，各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10
4、font-size可能需要额外的媒介查询，并且font-size不使用rem，这一点跟网易是一样的。
5、使用less利于计算写法
@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size.px2rem(@name, @px){ @{name}: @px / @baseFontSize * 1rem;}
//使用示例：
.container { .px2rem(height, 240);}
//less翻译结果：.container { height: 3.2rem;}
优点：在不同屏幕适配清晰度不受影响，而网易的做法在不同屏幕适配时清晰度有时会受影响
，
版权声明：本文为jinchao_zhang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。