css单位中px、em、rem的区别详情介绍

2017-8-29 1,092 8/29
  • px px像素是相对于显示器屏幕分辨率而言的。在浏览器缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小。
  • em 的值并不是固定的,会继承父级元素的字体大小,代表倍数。如果当前其父级未设置字体大小,则相对于浏览器的默认字体尺寸。
  • rem 的值并不是固定的,始终是基于根元素 <html> 的,也代表倍数。

🔺 em介绍

em 的使用是相对于其父级的字体大小的,即倍数。浏览器的默认字体大小都是16px,未经调整的浏览器显示 1em = 16px。但是有一个问题,如果设置 1.2em 则变成 19.2px,问题是 px 表示大小时数值会忽略掉小数位的(你想像不出来半个像素吧)。而且 1em = 16px 的关系不好转换,因此,常常人为地使 1em = 10px。这里要借助字体的 % 来作为桥梁。

因为默认时字体 16px = 100%,则有 10px = 62.5%。所以首先在 body 中全局声明 font-size=62.5%=10px,也就是定义了网页 body 默认字体大小为 10px,由于 em 有继承父级元素字体大小的特性,如果某元素的父级没有设定字体大小,那么它就继续了 body 默认字体大小 1em = 10px。

但是由于 em 是相对于其父级字体的倍数的,当出现有多重嵌套内容时,使用 em 分别给它们设置字体的大小往往要重新计算。比如说你在父级中声明了字体大小为 1.2em,那么在声明子元素的字体大小时设置 1em 才能和父级元素内容字体大小一致,而不是1.2em(避免 1.2*1.2=1.44em), 因为此 em 非彼 em。再举个例子:

  1. <span>Outer <span>inner</span> outer</span>
  1. body { font-size: 62.5%; }
  2. span { font-size: 1.6em; }

结果:外层 <span> 为 body 字体 10px 的 1.6倍 = 16px,内层 <span> 为外层内容字体 16px 的 1.6倍 = 25px(或26px,不同浏览器取舍小数不同)。

明显地,内部 <span> 内的文字受到了父级 <span> 的影响。基于这点,在实际使用中给我们的计算带来了很大的不便。

🔺 rem介绍

rem 的出现再也不用担心还要根据父级元素的 font-size 计算 em 值了,因为它始终是基于根元素(<html>)的

比如默认的 html font-size=16px,那么想设置 12px 的文字就是:12÷16=0.75(rem)

仍然是上面的例子,CSS改为:

  1. html { font-size: 62.5%; }
  2. span { font-size16pxfont-size: 1.6rem; }

结果:内外 <span> 的内容均为 16px。

 

需要注意的是,为了兼容不支持 rem 的浏览器,我们需要在各个使用了 rem 地方前面写上对应的 px 值,这样不支持的浏览器可以优雅降级。

选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用 rem,如果要考虑兼容性,那就使用 px,或者两者同时使用。

内容来源于网络

- THE END -
最后修改:2017年8月29日
0

非特殊说明,本博所有文章均为博主原创。

共有 1 条评论

  1. 姬长信

    Typecho转Wordpress成功
    ps:友链已改为内页
    https://blog.isoyu.com/links.html