rem 单位会根据根节点的字体大小来改变来改变自身大小,所以可以使用js代码来适配rem。往往我们接到的设计图纸都是以ipone6的375px视口宽度为基准。为了方便计算,配置的根节点字体大小都是以整数记。如果以375为便准配置100px的根节点大小可能会出现计算不方便,数值太小等问题,所以干脆使用750为基准配置100px的根节点大小。
(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);