Tips:PC,IOS对rem的计算比较准确,Android对rem的计算标准却是参差不齐,误差修正操作就是为了应对这一情况。
/**
* 根据屏幕大小以及设计稿进行rem适配
* @param {window} n - window
* @param {number} design - 设计稿宽度
* @param {number} scale - rem换算比例 exp: scale=10,则1rem=10px
*/
!((n, design, scale) => {
const e = n.document,
t = e.documentElement,
d = design / scale,
o = "orientationchange" in n ? "orientationchange" : "resize",
a = function () {
let n = t.clientWidth || i;
n > design * 2 && (n = design * 2);
n < design / 2 && (n = design / 2);
t.style.fontSize = n / d + "px";
const div = document.createElement("div");
div.style.width = "1.4rem";
div.style.height = "0";
document.body.appendChild(div);
const ideal = 1.4 * n / d;
const rmd = Number.parseFloat(getComputedStyle(div, null).width) / ideal;
console.log(rmd, "误差比");
if (rmd > 1.1 || rmd < 0.9) {
t.style.fontSize = (n / d) / rmd + "px";
console.log("修正执行");
}
document.body.removeChild(div);
};
e.addEventListener &&
(n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1));
})(window, 1920, 10);