解决移动端rem+百分比布局加载瞬间页面错乱的方法

发布日期：2017-08-01 22:36:29   浏览量：

移动端布局有很多种，这里我最常使用到rem+ 百分比的布局方式(高度/字体设置rem单位，宽度设置百分比)来处理屏幕兼容，这种方法在兼容上是比较不错的，可以使得字体以及整体适应各种大小的屏幕，可以解决ipad等比较大屏幕的适应兼容。然而发现一些问题。

页面在加载未完成前会出现瞬间错乱的现象，虽然时间不算长，但是肉眼可见，必须解决(此处以750像素的设计图为例)——加载前后页面，可以清楚的看到，加载未完成前的一小会儿，页面会出现一瞬间的崩塌现象。一开始没怎么在意这个问题，后来发现这样的页面的确影响视觉，视觉和心理，于是查了下资料，并未能找出很好的解决办法，后来自行研究了一下得到了如下几种办法，各有优缺点：

1.JS加载顺序与加载方法

页面加载顺序通常是”从上往下”加载的，所以在内容区域，也就是body以及body包含的DOM还未被浏览器遍历之前，我们就应该将html的font-size计算好。于是乎，我们应当把计算字体的js放在body之前，如下所示：