手机端rem

网易

1.viewport

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

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

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

2.布局时，设计图标注的尺寸除以100得到css中的尺寸
例子：播放器高度为210px，写样式的时候css应该这么写：height: 2.1rem。之所以取一个100作为参照，就是为了这里计算rem的方便！
3.在dom ready以后，通过以下代码设置html的font-size

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

var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + '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}
}

淘宝

device-width的计算公式为：
设备的物理分辨率/(devicePixelRatio * scale)，在scale为1的情况下，device-width = 设备的物理分辨率/devicePixelRatio
每款设备的devicePixelRatio都是已知，并且不变的，目前高清屏，普遍都是2，不过还有更高的，比如2.5, 3 等
在devicePixelRatio为2的时候，scale设为0.5
在devicePixelRatio为3的时候，scale设为0.3333
目的是为了保证页面的大小与设计稿保持一致
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

第一步，视觉设计阶段，设计师按宽度750px（iPhone 6）做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。

第二步，输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽度750px的设计标注图。

第三步，开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6（375pt）的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其它尺寸。

第四步，适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏适配。

http://www.cnblogs.com/well-nice/p/5509589.html