前端尺寸单位解密：em vs rem，哪一个更胜一筹？

前端尺寸单位的江湖纷争：em 与 rem

探索 em 与 rem，破解前端尺寸单位的奥秘

在构建前端页面时，选择合适的尺寸单位至关重要。像素 (px) 虽然稳定可靠，但对于响应式设计的需要来说，它显得过于死板。此时，em 和 rem 这两个相对单位就闪亮登场了。

em：当前元素的字体相对单位

em 是一种相对单位，它以当前元素的字体大小为基准。举个例子，如果当前元素的字体大小为 16px，那么 1em 就等于 16px。使用 em 单位可以确保元素尺寸随着字体大小的变化而变化，实现流式布局的效果。

body {
  font-size: 16px;
}

h1 {
  font-size: 2em;
}

p {
  font-size: 1.2em;
}

上述代码中，h1 元素的字体大小为 32px（2em），而 p 元素的字体大小为 19.2px（1.2em）。随着浏览器窗口的缩放，字体大小和元素尺寸都会相应调整，保持页面布局的和谐性。

rem：根元素的字体相对单位

rem 类似于 em，也是一个相对单位，但它的基准是根元素（html 元素）的字体大小。也就是说，如果根元素的字体大小为 16px，那么 1rem 就等于 16px。rem 单位的优势在于，它可以跨越嵌套元素的边界，实现更加统一的尺寸控制。

html {
  font-size: 16px;
}

body {
  font-size: 1rem;
}

h1 {
  font-size: 2rem;
}

p {
  font-size: 1.2rem;
}

与 em 单位相比，上述代码中元素的尺寸更加稳定，不会受到父元素字体大小变化的影响。

em 与 rem 的比较

为了更好地理解 em 和 rem 的区别，我们总结了以下表格：

特性	em	rem
定义	相对于当前元素字体大小的相对单位	相对于根元素字体大小的相对单位
用法	元素尺寸和间距的设置	页面整体尺寸和元素尺寸的设置
优点	实现流式布局	跨越嵌套元素的边界
缺点	嵌套元素尺寸计算复杂	根元素字体大小修改影响全局尺寸
使用场景	流式布局	统一尺寸控制

如何选择合适的单位？

选择合适的尺寸单位取决于具体的场景需求。需要实现流式布局时，可以使用 em 单位。需要实现统一尺寸控制时，可以使用 rem 单位。

代码示例

实现流式布局

body {
  font-size: 16px;
}

h1 {
  font-size: 2em;
}

p {
  font-size: 1.2em;
}

实现统一尺寸控制

html {
  font-size: 16px;
}

body {
  font-size: 1rem;
}

h1 {
  font-size: 2rem;
}

p {
  font-size: 1.2rem;
}

常见问题解答

1. em 和 rem 哪个更好？

   • 这取决于具体的使用场景。

2. em 单位是否会影响嵌套元素的尺寸？

   • 是的，会影响。

3. rem 单位是否可以确保页面尺寸的一致性？

   • 一般情况下是的，但如果修改根元素的字体大小，可能会影响全局尺寸。

4. 在实际项目中应该如何使用 em 和 rem？

   • 根据需要选择合适的单位，或者结合使用这两种单位实现精细的尺寸控制。

5. 使用 em 和 rem 时需要注意哪些事项？

   • 考虑嵌套元素的尺寸计算和根元素字体大小的修改影响。

结语

em 和 rem 都是前端尺寸单位的利器，各有千秋。掌握它们的特性和用法，可以让你游刃有余地构建响应式、兼容性强的页面布局。希望这篇文章能够让你对 em 和 rem 有一个更加深入的了解。