// designWidth: the actual value of the width of the draft design, according to the actual setting
// maxWidth: maximum width in the draft produced, according to the actual setting
// this js rearmost two parameters are set to remember, to a design draft actual width, the maximum width of a draft for the production of, for example, design draft of 750, a maximum width of 750, compared with (750, 750)
;(function(designWidth, maxWidth) {
var doc= document,
win= window,
Docela = doc.documentElement;
remStyle= document.createElement("style"),
time;
function refreshRem() {
var width= docEl.getBoundingClientRect().width;
maxWidth= maxWidth|| 540;
width>maxWidth&& (width=maxWidth);
var rem= width* 100 / designWidth;
remStyle.innerHTML= 'html{font-size:' + rem+ 'px;}';
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
}else {
var wrap= doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap= null;
}
// have to wait wiewport set to perform refreshRem, otherwise refreshRem will perform twice;
refreshRem();
win.addEventListener("resize",function() {
clearTimeout (tid); // prevent the execution of two
tid= setTimeout(refreshRem,300);
},false);
win.addEventListener("pageshow",function(e) {
if (e.persisted) {// browser back when recalculated
clearTimeout(tid);
tid= setTimeout(refreshRem,300);
}
},false);
if (doc.readyState=== "complete") {
doc.body.style.fontSize= "16px";
}else {
doc.addEventListener("DOMContentLoaded",function(e) {
doc.body.style.fontSize= "16px";
},false);
}
})(750,750);
Reproduced in: https: //www.jianshu.com/p/e1a795e69820