简单解决js计算rem单位首次加载页面瞬间布局错乱的问题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/caimingxian401/article/details/79954954

在写移动端布局时,有些人喜欢用单纯的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定义的大小覆盖,这样就可以解决也页面打开时的瞬间崩塌现象了

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页