rem加百分比 移動端載入瞬間錯亂解決方案
h5頁面在手機端瀏覽時，會閃一下錯亂的頁面，然後才載入完整，讓使用者看著特不舒服。解決方案也簡單
1.JS載入順序與載入方法
body以及body包含的DOM還未被瀏覽器遍歷之前，我們就應該將html的font-size計算好
function resize() { var htmlEle = document.documentElement; var htmlWidth = window.innerWidth; htmlEle.style.fontSize = 28 / 750 * htmlWidth + 'px'; } resize();
2.小技巧——對body進行CSS處理
這裡運用小技巧，利用css以及js的計時器等進行處理，先讓body隱藏，在計算好html的font-size後再令其顯示。其實按道理來說，這樣的處理方式有點粗暴，但是也不是不可採用，方法如下：
①給html中的body新增行內樣式 style=”display:none”, 先設定隱藏；
②計算js的方法在body之後新增，做到先載入網頁文件；
③在計算font-size的js方法之後新增如下第二段showPage 的js
強調文字
1毫秒的時間我們可以忽略不計
3.優化上面的小技巧——對body進行CSS處理
上述方法使用的display:none會有一定的問題，所以，大家不妨使用到display的表兄弟——visibility屬性,方法與2
幾乎一樣，如下：
給html中的body新增行內樣式 style=”visibility:hidden”,(就是替換display:none，其他不變) 先設定隱藏；
計算js的方法在body之後新增，做到先載入網頁文件；在計算font-size的js方法之後新增showPage 的js (就是替換display:none，其他不變)。
visibility屬性只是將元素隱藏，保留了其原本的位置，相當於它依然存在在頁面上，只是隱身了~~~~！！！！！！！相比較2，風險就小多了~！
<body style="visibility: hidden;">
function resize() { var htmlEle = document.documentElement; var htmlWidth = window.innerWidth; htmlEle.style.fontSize= 28 / 750 * htmlWidth + 'px'; } resize(); setTimeout(showPage,1); function showPage(){ $("body").css({ "visibility":"visible" }) }
以上這三種方法都可，這樣就解決我們載入時一閃錯亂的問題了
轉自：https://blog.csdn.net/qq_31381917/article/details/80126525?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control