返回 登录
0

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

阅读5637

以下的内容和观点未经大牛级别验证,有错误的地方请大牛留言指教~


移动端布局有很多种,这里我最常使用到rem+ 百分比
的布局方式(高度/字体设置rem单位,宽度设置百分比)来处理屏幕兼容,这种方法在兼容上是比较不错的,可以使得字体以及整体适应各种大小的屏幕,可以解决ipad等比较大屏幕的适应兼容。然而发现一些问题。
页面在加载未完成前会出现瞬间错乱的现象,虽然时间不算长,但是肉眼可见,必须解决(此处以750像素的设计图为例)——加载前后页面如下图所示:

图片描述 图片描述

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

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

推荐——原生写法(优化加载,加快body的显示):
图片描述

<script type="text/javascript">
   function resize() {
    var htmlEle = document.documentElement; 
    var htmlWidth = window.innerWidth;
    htmlEle.style.fontSize = 28 / 750 * htmlWidth + 'px'; 
   } resize(); 
</script>

jQ写法(不利于加载,不过jquery.min.js体积也不算太大):
图片描述

2.小技巧——对body进行CSS处理
如果不像1一样,让js方法在页面加载到body之前就运行,又能保证加载完成前页面不错乱应该怎么做呢!
这里运用小技巧,利用css以及js的计时器等进行处理,先让body隐藏,在计算好html的font-size后再令其显示。其实按道理来说,这样的处理方式有点粗暴,但是也不是不可采用,方法如下:

  1. 给html中的body添加行内样式 style=”display:none”, 先设置隐藏;
    图片描述
  2. 计算js的方法在body之后添加,做到先加载网页文档;
  3. 在计算font-size的js方法之后添加如下第二段showPage 的js
    图片描述强调文字

1毫秒的时间我们可以忽略不计

但是,这样的方法是有缺点的(至于存在多少问题,问题的大小,只能是一步步被发现):body设置隐藏之后,body元素从页面中被移除,而之后的js在遍历一些元素等偶尔会出现一些问题,比如使用过swiper框架的朋友可以试下,在初始化swiper之前设置以上方法试试~!你会发现,swiper无法使用了惊恐,无妨,后续介绍其解决方法!

3.优化上面的小技巧——对body进行CSS处理
上述方法使用的display:none会有一定的问题,所以,大家不妨使用到display的表兄弟——visibility属性,方法与2
几乎一样,如下:
1. 给html中的body添加行内样式 style=”visibility:hidden”,(就是替换display:none,其他不变) 先设置隐藏;

  1. 计算js的方法在body之后添加,做到先加载网页文档;
  2. 在计算font-size的js方法之后添加showPage 的js (就是替换display:none,其他不变)。

visibility属性只是将元素隐藏,保留了其原本的位置,相当于它依然存在在页面上,只是隐身了~~~~!!!!!!!相比较2,风险就小多了~!

上述方法,大家都可以试试,如果大家有其他更好,更规范的方法也可以一起交流学习~!!!!!!

评论