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

淘宝布局的第二个要点，就是html元素的font-size的计算公式，font-size = deviceWidth / 10：

接下来要解决的问题是，元素的尺寸该如何计算，比如说设计稿上某一个元素的宽为150px，换算成rem应该怎么算呢？这个值等于设计稿标注尺寸/该设计稿对应的html的font-size。拿淘宝来说的，他们用的设计稿是750的，所以html的font-size就是75，如果某个元素时150px的宽，换算成rem就是150 / 75 = 2rem。总结下淘宝的这些做法：

（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，这一点跟网易是一样的。

最后还有一个情况要说明，跟网易一样，淘宝也设置了一个临界点，当设备竖着时横向物理分辨率大于1080时，html的font-size就不会变化了，原因也是一样的，分辨率已经可以去访问电脑版页面了。

关于这种做法的具体实现，淘宝已经给我们提供了一个开源的解决方案，具体请查看：

https://github.com/amfe/lib-flexible

之前没有找到这相关的资料，实在不好意思：（

4. 比较网易与淘宝的做法

共同点：

不同点

//定义一个变量和一个mixin @baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size .px2rem(@name, @px){ @{name}: @px / @baseFontSize * 1rem; } //使用示例： .container { .px2rem(height, 240); } //less翻译结果： .container { height: 3.2rem; }

5. 如何与设计协作

前端与设计师的协作应该是比较简单的，最重要的是要规范设计提供给你的产物，通常对于前端来说，我们需要设计师提供标注尺寸后的设计稿以及各种元素的切图文件，有了这些就可以开始布局了。考虑到Retina显示屏以及这么多移动设备分辨率却不一样的问题，那么设计师应该提供多套设计稿吗？从网易和淘宝的做法来看，应该是不用了，我们可以按照设计稿，先做出一套布局，按照以上方法做适配，由于是等比适配，所以各个设备的视觉效果差异应该会很小，当然也排除不了一些需要媒介查询特殊处理的情况，这肯定避免不了的。下面这张图是淘宝设计师分享的他们的工作流程：

解释一下就是：

第一步，视觉设计阶段，设计师按宽度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）的界面效果。由此完成大中小三屏适配。

注意第三步，就要使用我们以上介绍的网易跟淘宝的适配方法了。假如公司设计稿不是基于750的怎么办，其实很简单，按上图做一些相应替换即可，但是流程和方法还是一样的。解释一下为什么要在@3x的图里切，这是因为现在市面上也有不少像魅蓝note这种超高清屏幕，devicePixelRatio已经达到3了，这个切图保证在所有设备都清晰显示。

 

以上是博主学习移动开发参考的一遍文章，博主分割线以下的总结也是基于以上这篇文章：

原文出处：原文飞机票

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

 

网易rem方案：

 

前提：

 

  

优势：

　　不用管DPR，只需知设计稿宽度

 

已知：

　　假设现有iPhone6设计稿，宽750px，其中一元素宽150px；

根据DPR值，iPhone6的DPR值为2，我们可得其中该元素的显示尺寸：

真实显示CSS值：

 

 

现在我们用网易方案来解决这个问题：

　　首先我们取1rem = 100px为参考值（这个值可以随便取，为何取这个值容后解答）

　　可知body的宽度：

 

　　又因为body的宽度为7.5rem，由“网易公式”可得：

　　Html的font-size为：

 

　　Dw为deviceWidth，即设备宽度，这是整个方案里唯一动态改变的值。

　　现我们已知设计稿为iPhone6，又知iPhone6的设备宽为375px，

　　这时候我们再回头看：

　　html当前设备的font-size：

 

　　且：

 

　　可知，无形中这步已帮我们作了DPR换算；750px的设计稿，显示在375px的屏幕要怎样转换。

　　前面我们取了1rem = 100px，可得该元素宽：150px = 1.5rem，

　　又知rem为其他元素相对根元素（html）的大小，

　　所以可得当前元素宽度的真实css显示值为：1.5rem*50px = 75px；（这里的75px就跟我们前面理想得到的75px不谋而合了）。

　　这边我们把这个运算再拆解来看：

 

　　现再回头看:就可以知道为什么当时要取100px为参考值，取这个值的意义就是为了方便运算。

 

 

总结：