在移动端rem布局在加载渲染页面的时候会出现元素由小到恢复正常一个现在。项目的设计稿是以750px，用以下代码设置html根元素font-size的代码。
(function (doc, win) {
var docEl = doc.documentElement,
isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
dpr = 1,
scale = 1 / dpr,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
docEl.dataset.dpr = dpr;
var metaEl = doc.createElement('meta');
metaEl.name = 'viewport';
metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
docEl.firstElementChild.appendChild(metaEl);
var recalc = function () {
var width = docEl.clientWidth;
if (width / dpr > 750) {
width = 750 * dpr;
}
// 乘以100，px : rem = 100 : 1
docEl.style.fontSize = 100 * (width / 750) + 'px';
};
recalc()
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
})(document, window);在完成整个页面的时候，我们在手机就看到了加载元素会先变小后恢复正常。
1.js加载顺序与加载方法
页面加载顺序通常是“从上往下”加载的，所以把上面这段代码发在head内，但还是出现上述问题。在网上也查找一些资料，换成原生写法，优化加载，可以加快body的显示。上述问题完美解决。
原生写法
2.进行body进行预先隐藏处理
这里为什么不用display？display设置none是直接移除元素，而visibility设置的hidden只是将元素隐藏，保留其原本的位置。
<body id="body" style="visibility:hidden;">
3.设置定时器setTimeout
定时器在加载方法1毫秒之后，对body进行visible，这1毫秒的时候我基本是可以忽视。
---------------------
作者：maggie_live
来源：CSDN
原文：https://blog.csdn.net/maggie_live/article/details/80262312
1063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
