简单解决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定义的大小覆盖，这样就可以解决也页面打开时的瞬间崩塌现象了