一般設計稿750px，為了便於計算，設1rem = 100px; 也就是1rem = 1 * htmlfontsize （htmlfontsize 為 html 元素的字型大小），在iphone6 375px寬的螢幕上，htmlfontsize 為50px。
其實，htmlfontsize 除了以px為單位外，還可以用百分比作為單位，比如你可以設定htmlfontsize的大小為312.5%，頁面的布局效果與設定htmlfontsize 大小為50px是一樣的效果。
那麼問題來了，設定為百分比單位的時候，這個百分比值是怎麼計算出來的呢？
瀏覽器預設字型大小為 16px，當我們使用百分比作為根節點 html 的字型大小時，rem 的計算方式就會改為
defaultfontsize = 16px
1rem = 1 * htmlfontsize * defaultfontsize
1rem = 1 * 312.5% *16 = 50 px這樣就會導致預設字型大於或小於16px。從這個思路出發，我們只需要找到系統設定的字型大小就可以正確的計算htmlfontsize的值了。
於是寫乙個函式來獲取defaultfontsize的值：
//獲取系統預設字型大小
//designwidth 設計稿的寬度
//rem2px 設計稿寬度下，1rem的寬度
function adapt(designwidth, rem2px);
!(function(doc, win, designwidth, rem2px) else
};if (!doc.addeventlistener) return;
win.addeventlistener(resizeevt, recalc, false);
doc.addeventlistener('domcontentloaded', recalc, false);
})(document, window, 750, 100);
之前搜尋了很久，也沒有看到很好的解決方案，包括像**的flexible適配方案也沒有解決這個問題，今天寫文章的時候在搜尋結果的後面幾頁，有一篇文章同樣也是介紹這個問題的，解決思路還是有點不太一樣的，這位同學是直接去獲取html的實際大小和理想值的比值，然後做 htmlfontsize 的相應處理，這裡一併給大家分享！
一般，我們動態計算好html的font-size之後，我們就啥都不幹了，就走了。
但是，我們現在知道了，我們設定的大小不一定是真實的大小，所以，我們需要在設定完字型大小之後，再去重新獲取一下html的font-size，看看實際的這個值，和我們設定的是不是一樣。
如果不一樣，就要根據比例再設定一次。
function htmlfontsize()
}
其實我建議用第三種方案進行處理，因為這樣體驗更統一，但是想想，如果使用者確實有調大字型的需求，或者有看小字型的習慣，使用者設定字型大小，你就是不給人家任何變化，也是相當不好的體驗呢。
Flexible實現H5頁面的rem布局適配
1 使用flexible實現手淘h5頁面的終端適配 2 flexible實現手淘h5頁面的rem布局適配 3 vue移動端flexible.js結合muse ui使用的小坑 4 的flexible適配方案為什麼只對ios進行dpr判斷，對於android始終認為其dpr為1 6 rem 及由此引申出...
小程式中webview內嵌h5頁面
小程式內嵌h5頁面跳轉小程式指定頁面,需要引用 jssdk h5頁面 aaa.htmldoctype html html head meta charset utf 8 meta name viewport content width device width,initial scale 1.0,m...
談談h5頁面中的rem
rem實現思路 rem單位是基於html標籤的font size來進行計算的，預設情況下1rem 16px,有些瀏覽器預設字型是12px，1rem 12px 在移動端通過設定不同的font size來實現頁面整體布局的縮放自適應。原理性的東西不做過多的贅述，網上各位大手都介紹的很詳細了，下面就說說在...