在 CSS 中，rem 和 em 是两种相对单位，用于根据元素的字体大小设置尺寸。尽管它们都是相对的，但它们的参考点是不同的。

rem (root em)
  • rem 单位的尺寸是相对于根元素（<html>）的字体大小来计算的。
  • 当你更改根元素的字体大小时，所有使用 rem 的元素的大小都会相应地调整。
  • rem 单位在响应式设计和主题化中特别有用，因为它们允许你通过更改一个单一的属性（根元素的字体大小）来影响整个文档的多个元素。

示例：

html {
    font-size: 16px;
}

.element {
    width: 10rem; /* 等于 160px */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
em
  • em 单位的尺寸是相对于其最近的父元素的字体大小来计算的。
  • 当你更改一个元素的字体大小时，其所有子元素（使用 em 单位的）的大小也会相应地调整。
  • 嵌套使用 em 可能会导致尺寸计算变得复杂，因为每个元素的大小都基于其父元素的字体大小。

示例：

div {
    font-size: 16px;
}

.child-element {
    font-size: 2em; /* 等于 32px，因为它是父元素字体大小的两倍 */
    width: 10em; /* 等于 320px，因为它是父元素字体大小的10倍 */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

注意事项：

  • 如果一个元素没有直接设置字体大小，它将继承其父元素的字体大小。因此，当你使用 em 时，你实际上是在构建一个基于字体大小的继承链。
  • 浏览器默认字体大小通常是 16px，但用户可以在其浏览器设置中更改它。使用 rem 可以确保你的设计在所有浏览器和设置下都能保持一致性。
  • 由于 em 是基于父元素的字体大小，所以在复杂的布局中，它可能会导致尺寸计算变得复杂和难以管理。相比之下，rem 提供了更直接的尺寸控制，因为它仅依赖于根元素的字体大小。