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

标签: 布局 rem 移动
442人阅读 评论(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 ]感悟挺深,前端知识更新太快,需要不断学习才可以。

查看评论

【HTML5移动端开发】[rem + 百分比布局] 加载抖动(高度不一致)解的决方法

解决移动端rem+百分比布局加载瞬间页面错乱的方法 以下的内容和观点未经大牛级别验证,有错误的地方请大牛留言指教~! 移动端布局有很多种,这里我最常使用到 rem+ 百分比 的布局方式(高度/字...
  • qq_31381917
  • qq_31381917
  • 2016年11月07日 12:44
  • 3078

rem布局加载闪烁问题

先上体验地址:http://jiguang.qq.com/jiguang_app/kapian/html/card-query.html?from=singlemessage扫描二维码:问题rem布局...
  • u013778905
  • u013778905
  • 2017年09月11日 22:25
  • 1242

关于如何用rem兼容不同手机屏幕大小不一致问题以达到多终端自适应问题

body{ margin:0rem; font-size:0.3rem;         /*谷歌浏览器  input元素  不继承 body的fontsize*/ }           ...
  • a3216291662
  • a3216291662
  • 2016年10月22日 20:14
  • 1713

rem布局,系统字体大小发生变化是,页面样式错乱的问题

最近做的一个APP,昨天测试的时候,发现在大多数手机上页面用rem布局,都是可以适配的,但是在一些手机上(比如三星A8000,默认字体大小比较大)出现了混乱,看上去像是宽度不够,有些元素被挤下来,整个...
  • wxy66666666
  • wxy66666666
  • 2017年02月16日 23:27
  • 1015

rem布局,页面加载时先放大一下再回复正常

先贴上我的rem布局的一段js: window.onload=function(){ setRemSize(); window.addEventListener("resize",setRemS...
  • wxy66666666
  • wxy66666666
  • 2017年04月23日 01:14
  • 1150

APP的六种loading加载样式,全在这

第一:优化App的加载算法,使得App与服务器交互数据的时间简短。这个需要开发人员的精益求精了。这个是从根本上解决了问题,因为直接减少了加载数据的时间,也就是减少了用户需要等待的时间。 第二:采用预...
  • songchunmin_
  • songchunmin_
  • 2016年09月21日 11:41
  • 2846

初始化移动端样式

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquo...
  • zfangls
  • zfangls
  • 2016年12月01日 09:30
  • 2154

常见的几种页面布局方式

1.固定布局(最基本的布局) 固定布局 *{ margin: 0; padding: 0; } html,body{ width:100% ; height: 100%; } .fixed...
  • DavidLog
  • DavidLog
  • 2017年04月26日 01:46
  • 5394

iOS页面的布局方式

iOS布局 frame autolayout autosizing autosizingmasks
  • wf96390
  • wf96390
  • 2016年03月19日 22:44
  • 3326

手机端页面自适应最简单解决方案—rem布局

该方案目前已过时,这里是更加完美的替代方案——rem布局(进阶版) 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex...
  • z469590925
  • z469590925
  • 2017年12月18日 10:12
  • 1013
    个人资料
    持之以恒
    等级:
    访问量: 1万+
    积分: 270
    排名: 28万+
    文章分类
    最新评论