css rem怎么计算的 css rem单位

admin2024-06-01  13

px\em\rem三者介绍

px

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。

因此,为了换算方便,通常我们会在HTML的根元素设置:

html { font-size: 100%; }

使得1em=10px,这样就可以很容易换算过来

rem

rem是CSS3新增的一个相对单位(root em,根em)。区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素

兼容rem问题

为了兼容rem,可以多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

对比与分析

总的而言,三者都是相对单位,但是相对的对象不同,px是相对分辨率、em是相对于父容器字体、rem是相对于html根元素字体。

  • px的好处是兼容性好,然而维护性差(因为如果没有预先规定好,字体从14px升级到16px大小,就可以改死人了。)
  • em的好处是维护性和兼容性都不错,然而可能造成层级性的问题。(例如父元素是50%,然后第二层元素50%,最后一层元素的em就只剩下25%了)如下:
<div style="font-size: 50%;">
<div style="font-size: 50%;">
    kkkkkk
    <div style="font-size: 1em">
    kkkkkkk222222
    </div>
</div>
</div>

最内一层的字体大小为:1em = 16*50%*50%=4px

在代码很复杂的情况下,就很容易造成样式混乱

  • rem的好处是维护性强,相对于根元素也不会出现层级问题的出现。但基于CSS3的它,会不被IE8兼容,因此需要px来做fallback处理。

注意事项

还有一点注意事项是,基本上以上单位都是用来进行文字的修改的。如果你想用于height、width等属性。那么调整font-size属性是不生效的。那么em就是默认值16px,rem则是根据HTML的font-size做调整。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!