簡單解決js計算rem單位首次加載頁面瞬間佈局錯亂的問題

在寫移動端佈局時，有些人喜歡用單純的CSS+百分比來控制字體單位，而有些人則喜歡用js來計算字體的單位以及處理屏幕兼容。這種方法其實是挺不錯的，比用媒體查詢能減少能多的後期處理。但是相信用過這個方法的人不少都會發現，在我們首次打開頁面的時候，有時會出現一閃而過的佈局錯亂的問題，雖然只是短短的一瞬間，但每次看到都會讓人覺得很不舒服。

	(function() {
		document.addEventListener('DOMContentLoaded', function () {
			var html = document.documentElement;
			var windowWidth = html.clientWidth;
			html.style.fontSize = windowWidth / 3.2 + 'px';
		}, false);
	})();

後來想明白了，頁面加載是遵循“從上到下”的順序，假如在body裏面的主要內容還沒加載前，則先把字體大小計算好，這樣是不是就不會出現頁面佈局一瞬間的崩塌了，但是最後發現這個方法還是沒用。但是我們知道了是css加載了再執行js纔會出現的問題，問題在於頁面一開始時沒有基礎字體大小，所以纔會出現一瞬間的錯亂，這樣我們直接在公共的css文件設置html的根字體爲font-size:100px;這樣問題就解決了。等到js計算出新的根字體大小就會把原來css定義的大小覆蓋，這樣就可以解決也頁面打開時的瞬間崩塌現象了