CSS 相对长度单位 em 和 rem 的区别

听

em 和 rem 都是 CSS 中的相对长度单位，它们的主要区别在于参考的基准不同：

1. em

参考基准：相对于当前元素的字体大小（font-size）。
- 如果当前元素没有设置字体大小，则相对于父元素的字体大小。
- 如果父元素也没有设置，则继续向上查找，直到找到最近的设置了字体大小的祖先元素。
特点：
- 是相对父元素的单位，容易受到父元素字体大小的影响。
- 在嵌套结构中，em 的值会逐层累积（即父元素的字体大小会影响子元素，子元素的字体大小又会影响孙元素，以此类推）。
适用场景：
- 适合用于局部布局，比如按钮、导航栏等需要与文本大小保持比例的组件。

示例：

.parent {
  font-size: 20px;
}
.child {
  font-size: 1.5em; /* 相对于父元素的字体大小：20px * 1.5 = 30px */
  padding: 1em;     /* 相对于自身的字体大小：30px * 1 = 30px */
}

2. rem

参考基准：相对于根元素（<html>）的字体大小。
- 根元素的字体大小默认是浏览器的默认字体大小（通常为 16px），除非你显式设置。
特点：
- 是相对根元素的单位，不受父元素字体大小的影响。
- 在嵌套结构中，rem 的值不会累积，始终基于根元素的字体大小。
适用场景：
- 适合用于全局布局，比如页面的间距、字体大小等需要保持一致的比例。

示例：

html {
  font-size: 16px; /* 根元素字体大小 */
}
.box {
  font-size: 1.5rem; /* 相对于根元素的字体大小：16px * 1.5 = 24px */
  margin: 2rem;      /* 相对于根元素的字体大小：16px * 2 = 32px */
}

对比总结

特性	`em`	`rem`
参考基准	父元素的字体大小	根元素（`<html>`）的字体大小
嵌套影响	会逐层累积	不会累积，始终基于根元素
适用场景	局部布局（如按钮、导航栏）	全局布局（如页面间距、字体大小）
兼容性	兼容性较好（IE6+）	需 IE9+（现代项目通常无问题）

使用建议

如果需要局部比例缩放（比如按钮的内边距随字体大小变化），使用 em。
如果需要全局一致的比例（比如页面的字体大小、间距），使用 rem。
在现代开发中，rem 更常用，因为它更易于维护和预测。

#前端开发分享于 2 周前