前言
目前app都是典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。
对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述：
rem方案(网易)
- html的font-size可以不用预先通过媒介查询在css里定义，而是通过js计算得出；
- 根据设计稿，基于iphone6（宽750px）为了计算方便，取一个100px的font-size为参照，那么body元素的宽度就可以设置为width: 6.4rem，于是html的font-size=deviceWidth / 6.4；
deviceWidth = 320，font-size = 320 / 6.4 = 50px
deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500，font-size = 500 / 6.4 = 78.125px
这个deviceWidth通过document.documentElement.clientWidth,所以当页面的dom ready后，做的第一件事情就是:
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
注意：
1.视口要如下设置：
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
- 当deviceWidth大于设计稿的横向分辨率时，html的font-size始终等于横向分辨率/body元素宽：font-size始终是100px 之所以这么干，是因为当deviceWidth大于640时，则物理分辨率大于1280（这就看设备的devicePixelRatio这个值了），应该去访 问pc网站了。事实就是这样，你从手机访问网易，看到的是触屏版的页面，如果从pad访问，看到的就是电脑版的页面。如果你也 想这么干，只要把总结中第三步的代码稍微改一下就行了：
var deviceWidth = document.documentElement.clientWidth; if(deviceWidth > 640) deviceWidth = 640; document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
rem方案(淘宝)
设备的物理分辨率/(devicePixelRatio * scale)，在scale为1的情况下，device-width = 设备的物理分辨率/devicePixelRatio devicePixelRatio称为设备像素比，每款设备的devicePixelRatio都是已知，并且不变的，目前高清屏，普遍都是2，不过还有更高的，比如2.5, 3 等
所以设置以下视口：
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
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
关于这种做法的具体实现，淘宝已经给我们提供了一个开源的解决方案，具体请查看：
比较网易与淘宝的做法
共同点：
- 都能适配所有的手机设备，对于pad，网易与淘宝都会跳转到pc页面，不再使用触屏版的页面
- 都需要动态设置html的font-size
- 布局时各元素的尺寸值都是根据设计稿标注的尺寸计算出来，由于html的font-size是动态调整的，所以能够做到不同分辨率下页- 面布局呈现等比变化
- 容器元素的font-size都不用rem，需要额外地对font-size做媒介查询
- 都能应用于尺寸不同的设计稿，只要按以上总结的方法去用就可以了
不同点
- 淘宝的设计稿是基于750的横向分辨率，网易的设计稿是基于640的横向分辨率，还要强调的是，虽然设计稿不同，但是最终的结果是一致的，设计稿的尺寸一个公司设计人员的工作标准，每个公司不一样而已
- 淘宝还需要动态设置viewport的scale，网易不用
- 最重要的区别就是：网易的做法，rem值很好计算，淘宝的做法肯定得用计算器才能用好
- 不过要是你使用了less和sass这样的css处理器，就好办多了****
