直接以750px设计稿为例:
(function(designwidth, maxwidth) {
var doc = document,
win = window;
var docel = doc.documentelement;
var remstyle = document.createelement("style");
//获取基准字体大小
function refreshrem() {
// var width = parseint(window.screen.width); // uc有bug
var width = docel.getboundingclientrect().width;
if (!maxwidth) {
maxwidth = 750;
};
if (width > maxwidth) {
width = maxwidth;
}
var rem = width/designwidth*100;
//得到的rem基准字体大小,这里乘以100是为了适配有的浏览器不识别小数,会导致设置字体无效。
//设置根元素html的字体大小为基准字体大小,在css中每rem就是这个值的大小。
remstyle.innerhtml = 'html{font-size:' + rem + 'px;} ';
}
refreshrem();
if (docel.firstelementchild) {
docel.firstelementchild.appendchild(remstyle);
} else {
var wrap = doc.createelement("div");
wrap.appendchild(remstyle);
doc.write(wrap.innerhtml);
wrap = null;
}
/* 以下为在不同的时机重新计算rem*/
win.addeventlistener("resize", function() {
// cleartimeout(tid); //防止执行两次
// tid = settimeout(refreshrem, 50);
refreshrem()
}, false);
win.addeventlistener("pageshow", function(e) {
if (e.persisted) { // 浏览器后退的时候重新计算
refreshrem()
// cleartimeout(tid);
// tid = settimeout(refreshrem,50);
}
}, false);
})(750, 750);
另外找了两篇说的比较细的文章,链接如下:
https://www.cnblogs.com/sky-ice/p/9596420.html
肝榆之尸