rem
- rem的值都是针对于当前页面中html元素的font-size的值进行动态计算的
有两种方法达到适配不同屏幕
① 利用媒体查询,在不同分辨率下给 html 的 font-size 赋值
② 利用 js 动态计算赋值,代码如下
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
recalc = function() {
if (docEl.clientWidth > 750) {
docEl.style.fontSize = "100px";
doc.getElementById("app").style.width = "750px";
} else {
var width = docEl.clientWidth / 7.5;
docEl.style.fontSize = width + "px";
doc.getElementById("app").style.width = "auto";
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);