px, em, rem 的区别和使用场景

962 阅读2分钟

区别

CSS 中,目前我们常用到的长度单位有 px, em, rem。

绝对长度单位

px(pixel 像素): 相对于显示设备而言的。对于低 dpi 设备,1px 是显示的一个设备像素(点)。对于打印机和高分辨率屏幕,1px 意味着多个设备像素。

特点:

  • 使用时间长, 而且比较直观。

相对长度单位

  1. em: 相对于元素的字体大小.目前浏览器默认的字体大小是 16px

  2. rem: 相对于根元素的字体大小

特点:

  • rem 和 em 作为相对长度单位。他们的大小都不是固定的,会根据参照物的大小而动态变化。
  • rem 相对 em 来说,计算的参照物只有一个:根元素(<html>),这样大大减小了计算成本。

比如说下面两个例子。分别计算出 grandson 的字体大小。

<div class="father">
  father font size
  <div class="child">
    child font size
    <div class="grandson">grandson font size</div>
  </div>
</div>

用 em 的是1.2*1.2*1.2 = 1.728em = 1.728*16px算起来就比较麻烦。

.father {
  font-size: 1.2em;
}
.child {
  font-size: 1.2em;
}
.grandson {
  font-size: 1.2em;
}

用 rem 的就直接是是1.2rem = 1.2*16px,相对比较直观一些。

.father {
  font-size: 1.2rem;
}
.child {
  font-size: 1.2rem;
}
.grandson {
  font-size: 1.2rem;
}

适用场景

px:

  1. 目前,我们浏览器现在的缩放都是通过 zoom 缩放,而不是改变文本大小。缩放的时候,用 px 的字体也会跟着一起缩放。所以做一些不需要支持移动端的网站可以用 px.
  2. 如果需求给的设计稿上就要求详细的 px 长度。比如说一些 boreder,image, icon。

em, rem:

  1. 它们是专门为可伸缩布局创建的。有些人喜欢把手机上的默认字体调大,这时候,浏览器的默认字体也会跟着变大。
  2. 方便适配各种分辨率的设备。