移動端rem自適應設定

標籤：get   手機   相容   func   images   裝置   color   size   script   

對於移動端自適應各種終端的解決方案較多，本篇只是選擇其中一種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‘,就可以愉快的敲代碼了！

 

移動端rem自適應設定