h5开发移动端，解决rem加载瞬间页面错乱的方法

小半 • 2023年2月10日上午9:45 • 前端开发 • 阅读 195

页面在加载未完成前会出现瞬间错乱的现象，以下是解决方法，可直接复制使用：
原理：页面加载顺序是”从上往下”加载的，所以在内容区域，也就是body以及body包含的DOM还未被浏览器遍历之前，我们应该先将html的font-size计算好。
以下两种方法选择其中一种使用就好。

1.将下面代码放在css文件最上面

html{font-size: 50px;}
@media (min-width: 320px){html{font-size: 42.6667px;} }
@media (min-width: 360px){html{font-size: 48px;} }
@media (min-width: 375px){html{font-size: 50px;} }
@media (min-width: 384px){html{font-size: 51.2px;} }
@media (min-width: 414px){html{font-size: 55.2px;} }
@media (min-width: 448px){html{font-size: 59.7333px;} }
@media (min-width: 480px){html{font-size: 48px;} }
@media (min-width: 512px){html{font-size: 68.2667px;} }
@media (min-width: 544px){html{font-size: 72.5333px;} }
@media (min-width: 576px){html{font-size: 76.8px;} }
@media (min-width: 608px){html{font-size: 81.0667px;} }
@media (min-width: 640px){html{font-size: 85.3333px;} }
@media (min-width: 750px){html{font-size: 100px;} }

2.将下面代码放在页面底部

（多页面使用的话，建议封装一个js，引入即可）

<script>
	(function(win) {
        var tid;
        function refreshRem() {
            let designSize = 750; // 设计图尺寸
            let html = document.documentElement;
            let wW = html.clientWidth;// 窗口宽度
            let rem = wW * 100 / designSize;
            document.documentElement.style.fontSize = rem + 'px';
        }

        win.addEventListener('resize', function() {
            clearTimeout(tid);
            tid = setTimeout(refreshRem);
        }, false);
        win.addEventListener('pageshow', function(e) {
            if (e.persisted) {
                clearTimeout(tid);
                tid = setTimeout(refreshRem);
            }
        }, false);

        refreshRem();

    })(window);
</script>