版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/csl125/article/details/80548056
写APP页面的时候遇见坑，布局使用rem，但是再页面渲染加载时出现变形，虽然时间非常短，但是肉眼可见，于是爬坑，
1，在页面body加载前引入html font-size计算js
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
if(clientWidth >= 640) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);我直接粗暴引到meta标签下 但是这种方法是jq方法 虽然有所改善但还是可见，
然后使用js原生方法
function resize(){
var docEl = document.documentElement;
var clientWidth = window.innerWidth;
if(clientWidth <= 320){
docEl.style.fontSize = '50px';
}else if(clientWidth >= 640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
}
resize();要把js代码放到body前；
还有一种方法就是 先给body 设置visibility：hidden；
<body id="body" style="visibility: hidden;">
</body>然后需要在body下将body的样式设置为visibility：visible；
<script>
document.getElementById('body').style.visibility = "visible";
</script>为什么不用display呢？个人认为如果页面display：none；后页面的DOM元素重新渲染了，对jq不友好，所以不建议使用，个人见解。