关闭

移动端rem布局导致页面加载瞬间无样式

标签: 布局rem移动
103人阅读 评论(1) 收藏 举报
分类:

今天做项目遇到一个问题之前一直都没有遇到过,查了很多资料,最后也解决了,记下来,防止以后面试官问:开发过程中有没有遇到什么问题啊,尴尬的说不出来。。。

一直移动端都是用的rem进行布局,今天遇到的问题是,字体使用rem页面加载瞬间css不生效,时间不是特别长,但是能非常清晰的看到。


正常的样式应该是这样:

应该出现的


页面加载瞬间会这样:

这里写图片描述


这就很尴尬,肉眼一下就能看出来,吓得我赶紧找bug,首先高度的问题是由于设置的是line-height,我用padding-top和padding-bottom代替竟然神奇的解决的,接下来是字体大小问题,我的字体是给的rem,断点发现走到这儿

这里写图片描述

就出现了问题,我想了很久,也没想出来毛病,百度了一下,最后这样解决:

1. 用原生代码代替jQuery

原先:jQ写法(不利于加载,不过jquery.min.js体积也不算太大)

这里写图片描述

后来换成了原生 ,原生写法(优化加载,可以加快body的显示)

这里写图片描述

并将这段计算字体的js放在了body之前,就这样我的问题就被神奇的解决了,就是这么尴尬,还准备用剩下的方法,,,为了更好的理解,我试了之后的做法。

2.对body进行预先隐藏处理

a:先给body加上样式display:none;

这里写图片描述

b:之前的js方法后面加上计时器,并将这段计算字体的js放在了body之后,使之计算好font-size之后再对body进行显示( 请将100毫秒改成1(100是为了方便测试),而1毫秒是可以忽略不计的)

这里写图片描述

此种方法有缺点是none直接移除,后来使用了和display:none类似的visibility:hidden;

<body id="body" style="visibility:hidden;">

document.getElementById("body").style.visibility="visible"//js里面改成这样

区别在于display:none,设置隐藏后,body元素从页面中被移除,会出现些小问题(之后的js遍历问题,swiper失效问题),而visibility只是将元素隐藏,保留了其原本的位置,风险较小。
bug消除参考=>[http://geek.csdn.net/news/detail/113801]
也看了一下对rem总结的文章=>[https://segmentfault.com/a/1190000003690140 ]感悟挺深,前端知识更新太快,需要不断学习才可以。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:167次
    • 积分:44
    • 等级:
    • 排名:千里之外
    • 原创:4篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类