方法阐述
将屏幕宽度分成10等分,比如设备宽度为 375px, 则 1rem = 37.5 px。
当设备宽度大于等于 设计稿宽度(designWidth) 时,则 1rem 始终等于 (designWidth / 10)px
项目中
使用第三方插件将 px 转换成 rem ,比如 postcss-px2rem
等
代码
/**
* @description: rem 适配
* @param {*} win window
* @param {*} doc document
* @param {*} designWidth 设计稿宽度
*/
function remApdet(win, doc, designWidth) {
var docEl = doc.documentElement; // html 根元素
var resizeEvt = "orientationchange" in window ? "orientationchange" : "resize"; // 窗口改变事件-兼容处理
// 设置根元素字体大小
var setRemUnit = function() {
var clientWidth = docEl.clientWidth;
if (clientWidth >= designWidth) {
docEl.style.fontSize = designWidth / 10 + "px";
} else {
docEl.style.fontSize = clientWidth / 10 + "px";
}
};
// 补全字体大小差异
var modifileRootRem = function() {
var fontSize = parseFloat(docEl.style.fontSize); // 获取当前根元素字体大小
var finalFontSize = parseFloat(win.getComputedStyle(docEl).getPropertyValue("font-size")); // 获取真实根元素字体大小
if (finalFontSize === fontSize) return;
docEl.style.fontSize = fontSize + (fontSize - finalFontSize) + "px";
};
// 调用
setRemUnit();
modifileRootRem();
// 当页面重新设置大小的时候,重新触发
window.addEventListener(
resizeEvt,
function() {
setRemUnit();
modifileRootRem();
},
false
);
// 当页面显示时触发
window.addEventListener(
"pageshow",
function(e) {
if (e.persisted) {
setRemUnit();
modifileRootRem();
}
},
false
);
}