最近專案重構，又扯到移動端的適配問題。
移動端適配的方式也很多， 什麼媒體查詢呀，百分比，響應式佈局等等，這裡就不多說了，小夥伴可以自行去網上看看。
這裡提到的是通過 rem 來適配移動端。

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

rem（font size of the root element）是指相對於根元素的字型大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對於父元素的字型大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。

如下程式碼，相信很多做移動端的都見過，這段js程式碼可以有效適配任何移動端裝置沒有問題。缺點

 (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實現移動端適配！