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

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

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

在计算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,其他不变) 先设置隐藏;

计算js的方法在body之后添加,做到先加载网页文档;

在计算font-size的js方法之后添加showPage 的js (就是替换display:none,其他不变)。

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

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

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

编辑:Beach

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