rem灵活移动端适配

最近项目重构，又扯到移动端的适配问题。
移动端适配的方式也很多， 什么媒体查询呀，百分比，响应式布局等等，这里就不多说了，小伙伴可以自行去网上看看。
这里提到的是通过 rem 来适配移动端。

提到rem，首先想到的是 rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

如下代码，相信很多做移动端的都见过，这段js代码可以有效适配任何移动端设备没有问题。缺点是页面需要加载js代码，这里我们能否想到只通过css来适配呢（当然排除媒体查询，因为媒体查询毕竟不能完美满足所有设备）

 (function(doc,win){  
     var docEl =doc.documentElement,  
             resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',  
             recalc = function(){  
                 var clientWidth = docEl.clientWidth>750 ? 750 :docEl.clientWidth;  
                 if (!clientWidth) {return};  
                 docEl.style.fontSize = 100 * (clientWidth/750) + 'px';  
             };  
     recalc();  
     if (!doc.addEventListener) return;  
     win.addEventListener(resizeEvt, recalc, false);  
     doc.addEventListener('DOMContentLoaded', recalc, false);  
 })(document,window)  

想到这里，扯回rem是什么。 他是指相对于根元素（html）的字体大小的单位。
css3中一个单位：vw我们可以完美适配移动端

vw： 1vw 等于视口宽度的1%！ 那我们可以用上vw来适配移动端吗？接下来看看吧！

我们以750*1334 iphone6的设计稿为例。之前提到rem和vw 我们将两者融合。

可以知道 每1VW = 750px * 1％ = 7.5px 。
我们添加如下代码

<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0">

为了方便计算，我们用 100px为例 100/7.5px = 13.33333。
我们可以给common.css或者reset.css直接设置如下代码

html {
    font-size: 13.333333333333334vw; /* 100vw / 750 * 100 */
}

接下来我们使用单位就直接可以按照100px = 1rem来做页面了。

总结： 首先我们想到的rem是根据html标签来计算的， 再者vw将视口分成100份，每一份代表当前1％； 这样外面可以完全使用css实现移动端适配！