问题描述:
1.当我们开发h5的时候,采用rem进行页面适配
rem.js文件代码
!function (d) {
var c = d.document;
var a = c.documentElement;
var b = d.devicePixelRatio;
var f;
function e() {
var h = a.getBoundingClientRect().width, g;
if (b === 1) {
h = 720
}
if(h>720) h = 720;//设置基准值的极限值
g = h / 7.5;
a.style.fontSize = g + "px"
}
if (b > 2) {
b = 3
} else {
if (b > 1) {
b = 2
} else {
b = 1
}
}
a.setAttribute("data-dpr", b);
d.addEventListener("resize", function () {
clearTimeout(f);
f = setTimeout(e, 200)
}, false);
e()
}(window);
2.main.js引入,并使用
//处理适配
import 'lib-flexible'
(function () {
var rem = document.createElement('script')
rem.src = '../rem.js'
document.body.appendChild(rem)
})()
3.当手机调试时,初始页面就会出现页面放大再缩小的一个短暂过渡的变化
造成原因
页面计算过程较慢
解决方法
1.在body之前引入使用,删除main.js里面引用的方法
2.在index.html里面创建使用
image.png
