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

最新推荐文章于 2024-04-20 10:34:48 发布
置顶 最新推荐文章于 2024-04-20 10:34:48 发布
阅读量4k 收藏 8
点赞数 1
分类专栏： 前端 文章标签： rem 前端 移动端 js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maggie_live/article/details/80262312
版权

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



maggie_live
关注
专栏目录
响应式布局特点、 Meta标签的设置、移动端页面布局
zcy_369的博客
08-04 554
响应式布局特点 优点 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况 Meta标签的设置 准备工作：设置Meta标签 <meta name="viewport" content="width=device-wid...
H5 移动端 iOS 初次加载页面，整体缩小（meta 设置失效的缘故）
weixin_30872499的博客
07-11 1073
爬坑之旅 漫长孤寂 感谢信息时代 感谢巨人的肩膀 感慨完毕，回归正题 之前开始时，遇到个奇葩的问题，在ios移动端初次加载页面，都会出现整体缩小的情况 真的是第一次遇到，可能是经历不够丰富吧（走过的路太少了啊） 网上百度了一圈，各有说法， 交流群也问了一圈，回答竟然是不管 好吧，还是得自己想办法 排查完毕，锁定为metaviewport的设置失效 想想之前怎么没...
H5解决移动端rem加载瞬间页面错乱的方法（放大或者缩小）
weixin_44735916的博客
06-10 861
页面在加载未完成前会出现瞬间错乱的现象，虽然时间不算长，但是肉眼可见，必须解决 我们知道页面加载顺序通常是”从上往下”加载的，所以在内容区域，也就是body以及body包含的DOM还未被浏览器遍历之前，我们就应该将html的font-size计算好。 所以我们应当把计算字体的js放在body之前 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport"
html body 放大2倍,解决移动端rem加载瞬间页面错乱的方法（放大或者缩小）
weixin_39969028的博客
06-21 804
移动端布局有很多种，这里我们最常使用到rem+百分比的布局方式(高度/字体设置rem单位，宽度设置百分比)来处理屏幕兼容，这种方法在兼容上是比较不错的，可以使得字体以及整体适应各种大小的屏幕，可以解决ipad等比较大屏幕的适应兼容。然而发现一些问题。页面在加载未完成前会出现瞬间错乱的现象，虽然时间不算长，但是肉眼可见，必须解决(此处以750像素的设计图为例)——加载前后页面如下图所示：可以清楚的看...
rem布局，页面加载时先放大一下再回复正常
悦己
04-23 4123
先贴上我的rem布局的一段js: window.onload=function(){ setRemSize(); window.addEventListener("resize",setRemSize,false);  function setRemSize(){    var _clientWidth = document.documentElement.clientWidth/7.2
移动端rem布局刷新 网页瞬间缩小
Mr_xwb的博客
08-24 1818
两种解决方案; 人狠话不多,直接上 解决方案. 1.利用媒体查询 设置几个常用的宽度 @media screen and (min-width:750px){ html{font-size:100px;} } @media screen and (min-width:640px) and (max-width:749px){ html{font-size:85.333px;}...
移动端rem加载时页面字体先放大再缩小
Bright2017的博客
08-14 1982
先给body 设置visibility：hidden； <body id="body" style="visibility: hidden;"> </body> 然后需要在body下将body的样式设置为visibility：visible； <script> document.getElementById('body').style.visi...
解决h5用rem布局的页面刚开始缩放一下的问题
QSWの
11-15 636
js： window.onload = function () { getRem(750, 100) }; window.onresize = function () { getRem(750, 100) }; function getRem(pwidth, prem) { var html = document.getElementsByTagName("html")[0]; var o...
移动端rem布局加载瞬间的尺寸有bug 由大变小 或者有小变大，怎么解决?
weixin_42137023的博客
10-21 2383
  我是这样解决的    1  body 或者html 加个visibility：hidden;  或者用opacity：0； &lt;body style="visibility: hidden;"&gt;&lt;/body&gt; 2 使用rem  加载完成后的函数调用 body属性的visbility：visible; (function(doc, win) {     var ...
引用rem.js初始化进入页面布局先小后正常解决办法
small_fox_dtt的博客
05-12 531
在公共的css文件设置html的根字体为font-size:100px;这样问题就解决了
vw+rem移动端自适应布局
最新发布
2401_84097774的博客
04-20 773
后记总结一下这三次面试下来我的经验是：一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！多刷面经！
rem移动端布局怎么适配IOS和Android
weixin_41809141的博客
07-06 5001
 rem移动端布局怎么适配IOS和Android        昨天“佬大”问我做的h5页面在ios上面显示正常，但是Android就变惨不忍睹了，于是我又开始了度量之路，几个小时过去了......“佬大”问好了没。我说：“还没”那你还是问下“俊伟”吧，果然一问牛逼的同事，迎刃而解的快感你感受到了没。做为一个程序员一定要学会问问问。  我当时用的是这种方式 &lt;meta name="v...
HTML5新结构标签和移动端页面布局
qq_40208605的博客
06-28 1649
--------------------HTML5新结构标签--------------------1、h5新增的主要语义化标签如下：　　1、header 页面头部、页眉　　2、nav 页面导航　　3、article 一篇文章　　4、section 文章中的章节　　5、aside 侧边栏　　6、footer 页面底部、页脚pc端兼容需要引用对应的js脚本&lt;script type="text/...
使用 rem dpr 实现移动端的自适应布局应该注意的问题
qq_15972061的博客
10-11 601
我们在上一篇《使用 rem 实现移动端的自适应布局》介绍了如何使用 rem 实现移动端自适应布局的问题，然而在实际项目中还有许多问题需要解决。前端之所以称为前端，就是冲锋陷阵的前方，作品直接对接真实用户，前端产品的质量直接影响用户的体验，也直接体现了整个产品的质量。所以对于前端工程师来说，要把产品做到尽善尽美。 首先看看页面字体问题，根据之前做法，页面中的字体大小可以根据设计稿的大小，通过...
移动端APP rem加载时页面放大或压缩解决
csl125的博客
06-02 1778
写APP页面的时候遇见坑，布局使用rem，但是再页面渲染加载时出现变形，虽然时间非常短，但是肉眼可见，于是爬坑，1，在页面body加载前引入html font-size计算js(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientati...
移动端rem布局，页面加载瞬间未恢复正常
kjnsfijglqj的博客
12-20 531
 在移动端rem布局在加载渲染页面的时候会出现元素由小到恢复正常一个现在。项目的设计稿是以750px，用以下代码设置html根元素font-size的代码。 (function (doc, win) { var docEl = doc.documentElement, isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? ...
移动端H5页面 rem 自适应缩放JS代码
沐枫
11-08 1293
移动端网页 rem 自适应布局 在各种屏幕大小手机上实现自适应效果，用rem单位，根据手机屏幕大小自动改变(包括横屏和竖屏时)：文字大小，图片大小，布局宽度大小等！ ;(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window...
移动端开发rem实现屏幕适配及处理页面加载页面坍塌样式错乱网页闪烁问题
mm
02-04 691
rem布局在加载的时候会出现元素一开始很小，闪烁一下恢复正常大小 问题的原因无非就是html一开始没有设置字体大小嘛，那我们就一开始按最常用的iPhone 6 尺寸，设置html的font-size: 50px;好了，设置html的font-size: 50px;就合理了吗？我的回答是，至少变化的范围非常小，以360px宽的设备为例，根字体大小应该是48px；以前相当于是从0px-48px，现在是50px-48px，不会造成很明显的闪烁问题。 至于为什么设置为50px；首先，设计稿是基于750px.
移动web开发之rem布局
feifeiwuxian的专栏
11-28 122
1.rem基础 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体大小就是 24px */ div { font-size: 2rem; } rem的优势：父元素文...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值