您的位置:首页 > 设计教程 > 网页设计 > 内页

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

核心提示: 移动端布局有很多种,这里我最常使用到rem+ 百分比的布局方式(高度/字体设置rem单位,宽度设置百分比)来处理屏幕兼容,页面在加载未完成前会出现瞬间错乱的现象,可以解决ipad等比较大屏幕的适应兼容。

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

页面在加载未完成前会出现瞬间错乱的现象,虽然时间不算长,但是肉眼可见,必须解决(此处以750像素的设计图为例)——加载前后页面如下图所示:

图片描述

可以清楚的看到,加载未完成前的一小会儿,页面会出现一瞬间的崩塌现象。一开始没怎么在意这个问题,后来发现这样的页面的确影响视觉,视觉和心理,于是查了下资料,并未能找出很好的解决办法,后来自行研究了一下得到了如下几种办法,各有优缺点:

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

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

文章源自 设计联盟 www.DesignLinks.cn 中国最具影响力的创意设计综合网站

编辑:Beach

搜索推荐
设计联盟官方微信
设计联盟官方微信
微信公众号:design_news
扫一扫 订阅最新资讯
回到顶部