移动端rem布局,加载瞬间页面缩小

   在移动端rem布局在加载渲染页面的时候会出现元素由小到恢复正常一个现在。项目的设计稿是以750px,用以下代码设置html根元素font-size的代码。


    在完成整个页面的时候,我们在手机就看到了加载元素会先变小后恢复正常。

1.js加载顺序与加载方法

  页面加载顺序通常是“从上往下”加载的,所以把上面这段代码发在head内,但还是出现上述问题。在网上也查找一些资料,换成原生写法,优化加载,可以加快body的显示。上述问题完美解决。

  原生写法

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

   这里为什么不用display?display设置none是直接移除元素,而visibility设置的hidden只是将元素隐藏,保留其原本的位置。

<body id="body" style="visibility:hidden;">
3.设置定时器setTimeout

  定时器在加载方法1毫秒之后,对body进行visible,这1毫秒的时候我基本是可以忽视。



评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值