移動端rem自適應設置

對於移動端自適應各種終端的解決方案較多，本篇只是選擇其中一種rem適配，我個人做移動端最喜歡的方案。

rem就是以html根元素的字體大小為參考，比如html:font-size:20px;1rem=20px;2rem=40px.....，因為移動端的屏幕特殊之處，主要是不同類型手機像素比dpr的不同，所以不能直接使用px來進行設置元素的尺寸，這里就需要引入一個可以兼容各種尺寸的解決方案，rem便是很好的一個，而對於rem的設置，我們是通過javaScript動態來設置，通過獲取設備屏幕的寬度來計算，具體代碼入下：

(function() {
    var html = document.documentElement;
    var width = html.getBoundingClientRect().width;
    html.style.fontSize = width / 15 + 'px';//至於除數15可自行設置
    //1rem=50;
})()

html.style.fontSize = width / 15 + 'px'；除數15的設置有點講究，主要看UI出的設計圖紙寬度，目前來說通常以iPhone6的屏幕尺寸來設計，也就是寬度750px，這里除以15后，1rem = 50px；主要是方便計算；對於設計圖紙不同的話，建議依圖確定除數的值。

這邊按照設計圖的寬度計算好1rem的值，接下來我們就可以正常的按照設計圖的尺寸的px值，進行和pc端一樣寫頁面了。

小提示：計算好rem值后，加入一個元素的寬高為50px，我們口頭計算就知道是1rem，可如果是18px呢？我們每次都自己計算豈不是會很麻煩？當然，計算機時代，肯定會解放我們的，各種編輯器都會提供自動計算轉換功能，以我常用的Hbuilder為例：

設置步驟：設置 => 選項 => HBuilder => 代碼助手設置 => 勾選'啟動px轉rem提示' => 設置'px轉rem比例'值（js計算出來的值）；設置好之后，我們正常開發輸入18px，編輯器會自動提示對應計算的rem值，按下'enter',就可以愉快的敲代碼了！