使用rem加载页面初始缩放问题

我们常常在移动使用rem进行适配 但是经常发现使用rem后 页面初次加载会有瞬间的缩放问题
应该是因为 dom先加载 然后加载rem计算方法
如何解决 有两个笨方法
1.在css加载后 将body隐藏 然后在所有js加载完成后再显示body(但是有数据加载问题,只适用于静态页)
2.在css中先加上几个常用的font-szie,代码如下(rem 1rem=100px)

<style>
    @media screen and (min-width:640px){
        html{font-size:86px;}
     }
     @media screen and (min-width:414px) and (max-width:639px){
         html{font-size:55px;}
      }
    @media screen and (min-width:375px) and (max-width:413px){
          html{font-size:50px;}
      }
    @media screen and (min-width:320px) and (max-width:374px){
        html{font-size:42.5px;}
      }
</style>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 了解真实的『REM』手机屏幕适配rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用。 使用...
    张宪宇阅读 2,295评论 0 5
  • 在做移动端前端开发的时候,常常遇到这样的问题,需要用rem来实现设备的自适应。但苦于rem和px的转换却又忘而却步...
    战铖阅读 2,817评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,350评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,821评论 0 2
  • 这周完成的 在这周完善了活动模块的接口实现和数据统计,安卓前端完成的大部分后台接口的对接,实现了发布活动,加...
    heartshapebox阅读 169评论 0 0