h5的移動端適配核心的問題有兩個：
1.因為目前手機(jī)品牌眾多跪者，手機(jī)的寬度不統(tǒng)一洛巢，所以第一個問題就是如何讓不同的手機(jī)顯示的內(nèi)容看起來是一樣的坡贺？
2.因為目前市場上的手機(jī)多數(shù)是高清屏，如何解決高清的問題翘瓮？
這篇文章將會介紹rem是如何解決這兩個問題贮折。
一、rem的簡介
rem是css3新增的屬性春畔，是一個相對單位（相對根節(jié)點html的字體大小來計算）脱货。比如：html的font－size為64px，2rem則是128px律姨。
二振峻、rem方案
這個方案本質(zhì)上是寬度等比適配，不同的手機(jī)通過動態(tài)的計算出html的字體大小來做等比換算择份，讓視覺（拿一部分出來扣孟，比如正方形）占手機(jī)寬度的比例在不同手機(jī)上是相等的，這樣就可以在不同手機(jī)上看起來是一個樣子荣赶。
動態(tài)計算html的字體大小的公式如下：
rem = document.documentElement.clientWidth * dpr / 10
說明：
1.乘以dpr凤价，是因為頁面有可能為了實現(xiàn)1px border頁面會縮放(scale) 1/dpr 倍(如果沒有，dpr=1)拔创。
2.除以10利诺，是為了取整，方便計算(理論上可以是任何值)剩燥。
3.根據(jù)這個公式可以知道慢逾，手機(jī)的clientWidth（屏幕寬度）和dpr（物理像素 / 設(shè)備獨(dú)立像素）決定了html的字體大小（基準(zhǔn)值）灭红。比如：
iphone3gs: 320px / 10 = 32px
iphone4/5: 320px * 2 / 10 = 64px
iphone6: 375px * 2 / 10 = 75px
這樣子假如一個針對iphone6的高清視覺稿 750×1334侣滩，如果有一個區(qū)塊，在psd文件中量出：寬高750×300px的div（寬度占滿屏幕）变擒，那么轉(zhuǎn)換成rem單位（rem = px / 基準(zhǔn)值）：寬高為10x4rem君珠。這樣的rem在iPhone4中換算成px為640x256px（寬度也是占滿屏幕的）。
三娇斑、代碼實現(xiàn)
這個方案只需要在加載頁面的body的時候先執(zhí)行以下js代碼就可以做到適配的效果策添。
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;//基準(zhǔn)值
scale = 1 / dpr;
// 設(shè)置viewport，進(jìn)行縮放毫缆，達(dá)到高清效果
//理論上舰攒，1個位圖像素對應(yīng)于1個物理像素，圖片才能得到完美清晰的展示悔醋。
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale+ ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 動態(tài)寫入樣式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
四摩窃、參考文章：https://sanwen8.cn/p/416glHZ.html
