css rem不准确是什么原因?

css使用rem设置字体大小,但发现不准确;或者页面在一个浏览器上查看样式正常显示,到了别的浏览器显示就不对了。这是什么原因?要怎么解决?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

问题描述

当使用 rem 作为单位时,页面在自己浏览器上查看样式正常显示,到了别的浏览器显示就不对了。

原因

首先需要明白 rem 的实质,博客千千万,就不赘述了,随便贴一个:CSS 动态REM

rem 是相对于页面根字体的单位,根据 <html>font-size 进行计算得到实际长度。一些浏览器对于 字体小于12px 的情况统统处理成 12px,所以如果根字体大小被设为小于12px的值,很可能显示就会出现问题。

举个栗子,一般移动端设计稿宽度是 750px,浏览器默认的根字体大小是 16px,所以一般设置情况是:

屏幕宽度 750px 时,1rem = 16px;其他设备根据实际大小进行缩放(媒体查询),如 iPhone 7 的宽度是 375px,则在此设备下有 1rem = 8px;以此类推,以下是媒体查询写法:

@media screen and (min-width: 320px){
    html {
        font-size: 43% !important; 
    }
}

@media screen and (min-width: 360px){
    html {
        font-size: 48% !important; 
    }
}

@media screen and (min-width: 375px){
    html {
        font-size: 50% !important; 
    }
}

@media screen and (min-width: 414px){
    html {
        font-size: 54.8% !important; 
    }
}

@media screen and (min-width: 750px){
    html {
      font-size: 100% !important; 
    }
}

@media screen and (min-width: 1024px){
    html {
        font-size: 138% !important;
    }
}

高亮: 这是网上普遍的写法,会导致在某些浏览器中 rem 无效。

解决方法

方法很简单,将根字体的大小扩大即可,我这里是扩大了2倍:

/* 1rem = 32px */
@media only screen and (min-width: 320px){
    html {
        font-size: 86% !important; 
    }
}

@media only screen and (min-width: 360px){
    html {
        font-size: 96% !important; 
    }
}

@media only screen and (min-width: 375px){
    html {
        font-size: 100% !important; 
    }
}

@media only screen and (min-width: 414px){
    html {
        font-size: 109.6% !important; 
    }
}

@media only screen and (min-width: 750px){
    html {
      font-size: 200% !important; 
    }
}

@media only screen and (min-width: 1024px){
    html {
        font-size: 138% !important;
    }
}

所以有,rem = 实际px / 32px

px / rem 转换插件

这里强推一个 vscode 的插件:px to rem,可以十分方便使用快捷键在 px 和 rem 之间转换~

更多web前端相关知识,请查阅 HTML中文网 !!

以上就是css rem不准确是什么原因?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏