移动端适配新思路

于移动端的适配方案，目前用的比较多的是三种方案： 

1.  固定高度，宽度自适应 （ 腾讯 、 京东 、 百度 、 天猫 、 亚马逊 的首页都是使用的这种方法。）；
2.  固定宽度，viewport缩放 （目前已知 荔枝FM 、 网易新闻 在使用这种方法。有兴趣的同学可以看看是怎么做的）；
3.  rem做宽度，viewport缩放 （ 淘宝 使用的方案）；

这些方案都有小试，这三个还是有坑的。当然并不是说这些方案不好，而是想寻找更为适用的解决方案。如果有用过或看过淘宝的解决方案的，那应该会注意到淘宝的解决方案中有 设备像素比 ＝ 物理像素 / 设备独立像素 的概念。这个比较高端，不是很好理解这和我们做页面有什么关系。其通过js去设置Html的字号大小，然后用rem来做单位以达到适配（详情请查看淘宝的 Flexible）。整体来说兼容性强，但是要为  IOS 4-5s  IOS 6-6s 写独立的样式，这就比较坑爹了。

本文要说的新解决方案，就是用淘宝的思路（通过设置html的字号，然后用rem来做单位以达到适配），却又不走淘宝的路（用js却设置html的字号大小，为IOS 4-5s  6-6s 写独立的样式）。

为html设置字体大小，但单位却不是用px，而是是vw! px单位是固定的，如果遇到不同的分辨率，那么要达到兼容就得去重新设置值。这样就又得用js。而用vw单位却不用，因为vw这单位并不是固定的。

示例代码：

h1{font-size:8vw;}

 如果视口的宽度是200px，那么上述代码中h1元素的字号将为16px，即(8x200)/100; 与百分比（%）相似。

这种情况下，html的字号大小就会根据你的屏幕宽度来改变其实际的大小。还要注意一点就设计稿的px单位与写页面的rem单位比较难换算，虽然淘宝也放出的rem与px的转换插件，但写起来容易维护起来就头疼了！所以在设置html字号大小的时候要考虑px与rem的转换问题。如果1rem=100px，那么我们在计算时就相对的要容易的多了。而已在维护时也能好维护，不用去算来算去。

说了这么多，那到底这解决方案是怎么样的呢？下面就为大家讲解：

html字号用vw单位的解决方案
html字号与设计稿宽度的关系与计算方式
     100            /       设计稿宽度      =    html字体
(页面宽100vw)       (100px=1rem)         (vw单位)

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，如有发现请指正。