移動端布局有很多種，這里我們最常使用到rem+百分比的布局方式（高度/字體設置rem單位，寬度設置百分比）來處理屏幕兼容，這種方法在兼容上是比較不錯的，可以使得字體以及整體適應各種大小的屏幕，可以解決ipad等比較大屏幕的適應兼容。然而發現一些問題。頁面在加載未完成前會出現瞬間錯亂的現象，雖然時間不算長，但是肉眼可見，必須解決（此處以750像素的設計圖為例）——加載前后頁面如下圖所示：
可以清楚的看到，加載未完成前的一小會兒，頁面會出現一瞬間的崩塌現象。一開始沒怎么在意這個問題，后來發現這樣的頁面的確影響視覺，我們知道頁面加載順序通常是”從上往下”加載的，所以在內容區域，也就是body以及body包含的DOM還未被瀏覽器遍歷之前，我們就應該將html的font-size計算好，所以我們應當把計算字體的js放在body之前。以下是解決方法：
1.在公共的css文件設置html的根字體為font-size:100px;這樣問題就解決了。等到js計算出新的根字體大小就會把原來css定義的大小覆蓋，這樣就可以解決也頁面打開時的瞬間崩塌現象了
<script type="text/javascript"> function resize() { var htmlEle = document.documentElement; var htmlWidth = window.innerWidth; if(!htmlWidth) return; if(htmlWidth >= 750){ htmlEle.style.fontSize = '100px'; }else{ htmlEle.style.fontSize = 100 * (htmlWidth / 750) + 'px'; } resize(); </script>
2.進行body進行預先隱藏處理
這里為什么不用display？display設置none是直接移除元素，而visibility設置的hidden只是將元素隱藏，保留其原本的位置。
<body id="body" style="visibility:hidden;">
3.設置定時器setTimeout
定時器在加載方法1毫秒之后，對body進行visible，這1毫秒的時候基本是可以忽視。
<script type="text/javascript"> setTimeout(function(){ document.getElementById('body').style.visibility = 'visible'; },1); </script>