rem根據螢幕寬度來調整html根元素的font-size

南城夏季發表於2018-04-13
REMHTML

使用rem作為單位寫頁面：


用rem作為頁面的寬高單位就可以根據螢幕寬度的變化來及時適應。

根據螢幕寬度來調整html根元素的font-size（即rem）需要一段js程式碼：

(function (doc, win) {
var docEl=doc.documentElement;         //documentElement 屬性是根節點
resizeEvt='orientationchange' in window ? 'orientationchange': 'resize';
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 640) + 'px';//設定html根元素的font-size
};


if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false)
;

相關文章