rem适配方案,默认1920,根据设计图调整,注释写的很清楚,可自己加,单位必须用rem rem根据HTML的px进行匹配,比如html的fontSize是122px , 1rem = 122px 这个方案比较简洁,欢迎补充
mounted() {
this.suofang();
},
methods: {
suofang() {
(function(doc, win) {
const uiWidth = 1920; // 设计稿宽度
const docEl = doc.documentElement;
// 检测屏幕翻转
const resizeEvt =
"orientationchange" in window ? "orientationchange" : "resize";
const recalc = function() {
// clientWidth = width+左右padding
let clientWidth = docEl.clientWidth;
if (!clientWidth) {
return;
}
// if (clientWidth >= uiWidth) {
// clientWidth = uiWidth;
// }
// 全部宽度 / 设计稿宽度 赋值html
docEl.style.fontSize = 1 * (clientWidth / uiWidth) + "px";
};
if (!doc.addEventListener) {
return;
}
// 注册事件-不冒泡
win.addEventListener(resizeEvt, recalc, false);
// 脚本解析完毕,html未解析完触发-不冒泡
doc.addEventListener("DOMContentLoaded", recalc, false);
recalc();
})(document, window);
},
},
