rem根据屏幕宽度来调整html根元素的font-size

使用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)
;

你可能感兴趣的:(js)