30行js讓你的rem彈性佈局適配全部分辨率(含豎屏適配)

用rem來實現移動端的彈性佈局是個好主意！用法以下：

CSS

@media only screen and (max-width: 320px), only screen and (max-device-width:320px) { html { font-size:10px; } } @media only screen and (max-width: 640px), only screen and (max-device-width:640px) { html { font-size:20px; } } .test-div{width: 10rem;} 

那麼這個.test-div的寬度在320px的分辨率下會是10 * 10 = 100px, 在640下是10 * 20 = 200px，從而達到了彈性縮放的目的。

可是這樣作仍是有2個問題：

1. 隨着各類新手機的發佈，分辨率也碎片化了，咱們沒法預知未來會出現的分辨率寬度，咱們不可能把全部要兼容的分辨率寫到css裏。

2. 這樣寫只能作到頁面適配不一樣的寬度，對於那種在各類屏幕上都要在一屏幕內顯示的頁面，就沒有辦法適配了。

好比這種很是流行的整屏滑動頁面，當屏幕寬高比小於設計稿的比例時會縮放：

因此完美解決適配的問題就得靠js了，思路很是簡單，判斷一下當前終端的寬度（這裏在安卓上有個坑，後面會說）和設計稿寬度的比例，計算出須要縮放的倍數，而後根據這個倍數值改變html的字體大小便可。

若是須要橫豎屏都適配，那麼根據終端寬高比例較小的那一個來計算。用通俗的語言來講，若是終端屏幕比設計稿更加寬矮一些，那麼久根據它和設計稿的高度比例來計算字體。

思路永遠是簡單，實現永遠是有問題須要解決的，先上代碼：

https://github.com/leon776/setHtmlRem

JAVASCRIPT

console.time("test"); /* # 按照寬高比例設定html字體, width=device-width initial-scale=1版 # @pargam win 窗口window對象 # @pargam option{ designWidth: 設計稿寬度，必須 designHeight: 設計稿高度，不傳的話則比例按照寬度來計算，可選 designFontSize: 設計稿寬高下用於計算的字體大小，默認20，可選 callback: 字體計算以後的回調函數，可選 } # return Boolean; # xiaoweili@tencent.com # ps:請儘可能第一時間運行此js計算字體 */ !function(win, option) { var count = 0, designWidth = option.designWidth, designHeight = option.designHeight || 0, designFontSize = option.designFontSize || 20, callback = option.callback || null, root = document.documentElement, body = document.body, rootWidth, newSize, t, self; root.style.width = 100%; //返回root元素字體計算結果 function _getNewFontSize() { var scale = designHeight !== 0 ? Math.min(win.innerWidth / designWidth, win.innerHeight / designHeight) : win.innerWidth / designWidth; return parseInt( scale * 10000 * designFontSize ) / 10000; } !function () { rootWidth = root.getBoundingClientRect().width; self = self ? self : arguments.callee; //若是此時屏幕寬度不許確，就嘗試再次獲取分辨率，只嘗試20次，不然使用win.innerWidth計算 if( rootWidth !== win.innerWidth && count < 20 ) { win.setTimeout(function () { count++; self(); }, 0); } else { newSize = _getNewFontSize(); //若是css已經兼容當前分辨率就無論了 if( newSize + 'px' !== getComputedStyle(root)['font-size'] ) { root.style.fontSize = newSize + "px"; return callback && callback(newSize); }; }; }(); //橫豎屏切換的時候改變fontSize，根據須要選擇使用 win.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() { clearTimeout(t); t = setTimeout(function () { self(); }, 300); }, false); }(window, { designWidth: 640, designHeight: 1136, designFontSize: 20, callback: function (argument) { console.timeEnd("test") } });

而後再說幾個點和問題：1. 這段代碼對viewport有要求，必須是width=device-width initial-scale=1，即窗口的大小是設備物理寬度(分辨率 / devicePixelRatio)，而且禁止縮放。另外還有一種作法就是手機淘寶的作法，窗口大小是分辨率寬度，而後縮放倍數是1/devicePixelRatio，這裏暫且不討論。

2.就是解決安卓上的問題。通過實測，有些安卓機器，使用1的viewport，在頁面剛加載的時候。無論是讀取window.innerWidth，仍是doc的getBoundingClientRect().width，或者是body的clientWidth，都不是設備的物理寬度。因此只好祭出黑魔法setTimeout，一試果真能夠，異步100ms執行獲取屏幕寬度的代碼就準確了。可是這種不可控的代碼讓人不爽。

由於width=device-width initial-scale=1，documentElement的寬度又是100%，因此當這兩個值相等的時候咱們能夠認爲目前獲取到的屏幕寬度是準確的。那麼使用此條件做爲判斷條件，不斷的setTimeout(fun(){}, 0)去判斷，當此條件爲真時改變documentElement的字體。能夠儘量快的執行目標代碼。可是又萬一這兩個值一直不相等又不能無限的死循環下去，因此設置了一個嘗試上限，到上限以後用窗口寬度來計算（縮放比例不對的話用戶起碼能夠看到完整的頁面）。在chrome下測試，執行40次代碼的平均時間是230ms，考慮到安卓機的js引擎速度，將上限設爲了20。

3.是執行時機，我的建議將這段代碼放到head裏，第一時間計算好html的fontSize，避免重繪。若是你有有一些跟獲取dom元素尺寸相關的操做，就得放到這個計算函數的回調裏面了，這時候就不能放到head裏(由於運行的時候dom都還沒加載)，只能放到底部或者doc的ready事件裏了。最佳實踐是有一個全屏的loading畫面，當fontSize計算好了以後再把真正的頁面展現出來。