关闭

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

标签: 布局rem移动
197人阅读 评论(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网站的观点或立场

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

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

移动端的自适应rem布局

相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex),也都能获得不错的效果,这里主要介绍的是本人在实践中用的最顺手最简单的布...
  • oo191416903
  • oo191416903
  • 2017-03-13 10:53
  • 1260

移动端布局之REM,以及实际使用总结

rem在移动端布局中的实践,以及为什么根元素html font-size设置为62.5%
  • xiongsha
  • xiongsha
  • 2016-09-20 16:26
  • 811

移动端自适应布局解决方案——rem

移动端自适应布局解决方案——rem 发表于 2016-06-16   |   2条评论   |   阅读次数 79 自适应布局方案有百分比布局、flex布局、弹性flex布局等,但是都...
  • qq_31301099
  • qq_31301099
  • 2016-11-02 18:12
  • 501

移动端rem布局初步练习

渐渐明白,要做就要做高级,现在社会已经不需要实习工,不需要初级员工。如果你培训几个月能够找到相关工作,如果刚毕业什么都不懂能够找到工作,请好好珍惜。因为很多小白给人免费实习别人都嫌碍事,本人亲历。 你...
  • wujimiao
  • wujimiao
  • 2017-03-17 23:56
  • 482

移动端布局单位选择之rem

首先先将几个主要概念讲一下;     什么是移动端?       :移动端故名思义是为移动终端,大名叫移动通信终端,是指可以在移动中使用的计算机设备。其实就是我们常说的手机。     什么是布局...
  • crazyzhanyue
  • crazyzhanyue
  • 2016-12-22 08:21
  • 1422

响应式设计-VS-REM布局

水平有限,不对之处还请指出。 【目前几种布局】 随着移动互联网的发展和微信的突起,移动端的响应式布局越来越重要了。 目前网站布局有以下几种: 1.定宽度布局 很多pc的网站都是定宽度布局的,也就是...
  • uikoo9
  • uikoo9
  • 2015-06-19 03:15
  • 17017

移动端REM响应式模板及相应规范

移动端REM响应式模板及相应规范
  • hf123lsk
  • hf123lsk
  • 2017-04-26 11:10
  • 461

移动端rem布局的理解

rem是什么?rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font siz...
  • u011520348
  • u011520348
  • 2016-05-20 13:44
  • 4971

(淘宝无限适配)手机端rem布局详解

从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的...
  • xwqqq
  • xwqqq
  • 2017-02-04 12:21
  • 4913
    个人资料
    • 访问:1076次
    • 积分:151
    • 等级:
    • 排名:千里之外
    • 原创:13篇
    • 转载:0篇
    • 译文:0篇
    • 评论:3条
    文章分类
    最新评论