于移动端的适配方案，目前用的比较多的是三种方案： css
1. 固定高度，宽度自适应 （ 腾讯 、 京东 、 百度 、 天猫 、 亚马逊 的首页都是使用的这种方法。）；
2. 固定宽度，viewport缩放 （目前已知 荔枝FM 、 网易新闻 在使用这种方法。有兴趣的同窗能够看看是怎么作的）；
3. rem作宽度，viewport缩放 （ 淘宝 使用的方案）；html
这些方案都有小试，这三个仍是有坑的。固然并非说这些方案很差，而是想寻找更为适用的解决方案。若是有用过或看过淘宝的解决方案的，那应该会注意到淘宝的解决方案中有 设备像素比 ＝ 物理像素 / 设备独立像素 的概念。这个比较高端，不是很好理解这和咱们作页面有什么关系。其经过js去设置Html的字号大小，而后用rem来作单位以达到适配（详情请查看淘宝的 Flexible）。总体来讲兼容性强，可是要为 IOS 4-5s IOS 6-6s 写独立的样式，这就比较坑爹了。git
本文要说的新解决方案，就是用淘宝的思路（经过设置html的字号，而后用rem来作单位以达到适配），却又不走淘宝的路（用js却设置html的字号大小，为IOS 4-5s 6-6s 写独立的样式）。github
为html设置字体大小，但单位却不是用px，而是是vw! px单位是固定的，若是遇到不一样的分辨率，那么要达到兼容就得去从新设置值。这样就又得用js。而用vw单位却不用，由于vw这单位并非固定的。布局
示例代码：字体
h1{font-size:8vw;}
若是视口的宽度是200px，那么上述代码中h1元素的字号将为16px，即(8x200)/100; 与百分比（%）类似。spa
这种状况下，html的字号大小就会根据你的屏幕宽度来改变其实际的大小。还要注意一点就设计稿的px单位与写页面的rem单位比较难换算，虽然淘宝也放出的rem与px的转换插件，但写起来容易维护起来就头疼了！因此在设置html字号大小的时候要考虑px与rem的转换问题。若是1rem=100px，那么咱们在计算时就相对的要容易的多了。而已在维护时也能好维护，不用去算来算去。插件
说了这么多，那到底这解决方案是怎么样的呢？下面就为你们讲解：设计
html字号用vw单位的解决方案
html字号与设计稿宽度的关系与计算方式
100 / 设计稿宽度 = html字体
(页面宽100vw) (100px=1rem) (vw单位)htm
eg: 750px设计稿：
100 / 7.5rem = 13.333vw
eg: 640px设计稿：
100 / 6.4rem =15.625vw
在此解决方案中，用rem作为全部的单位。如在设计稿中，字体大小为24px，则使用中为0.24rem。没错，字体大小也用rem作为单位这样能确保作来的页面与设计稿彻底一致。
其原理确实很简单，以宽750px的设计稿为例。
咱们先设定100px=1rem，那么设计稿 750px=7.5rem； 页面的宽为100vw，那么100vw/7.5rem=13.333vw/rem => 1rem=13.333vw;
页面大小恒定为7.5rem，rem是基于html字号大小，html字号大小基于屏幕宽度。因而屏幕宽度就直接影响到了rem单位。这与百分比的布局有点相同，但百分比没法用于设置高度（并非全部的手机长宽比都是同样的），而rem单位却能用来设置高度。由于rem是基于html的字号大小而不是基于屏幕的高度。
设置一个正方形的DIV宽为7.5rem,高为7.5rem；无论是多宽的屏幕这个div都会是7.5rem（100vw）的高宽（由于1rem=13.333vw），都正好与屏幕宽度适配。这就是本解决方案的核心。
此解决方案尽适用于移动端，还没有发现bug，若有发现请指正。