移动端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毫秒的时候我基本是可以忽视。



猜你喜欢

转载自blog.csdn.net/maggie_live/article/details/80262312