你如何理解 CSS 中的 em 和 rem 单位？

讨论 CSS 中 em 和 rem 的区别及其应用场景。

CSS 中等单位相对长度响应式设计

em 和 rem 都是 CSS 中的相对长度单位，但它们的工作原理和应用场景有显著区别。作为开发者，从面试角度深入理解这两个单位是常见的面试考点。以下从四个方面展开介绍：

参照对象不同:
- em：其值相对于当前元素的父元素的字体大小。如果父元素没有明确设置字体大小，则会向上继承，直到找到确切的参考值，最终可能追溯到浏览器默认设置（通常为 16px）。例如：
```
<body>
  <div style="font-size: 20px;">
    父元素
    <p style="padding: 1em;">Padding 基于 20px (1em == 20px)</p>
  </div>
</body>
```
  这里，p 的 padding 使用的是 em，实际值为父 div 的字体大小乘以倍数。
- rem（Root EM）：其值只相对于文档根元素（通常是 <html> 元素）的字体大小。无论元素的父子层级如何，rem 的计算始终根植于此。例如：
```
<html style="font-size: 16px;">
  <body>
    <p style="font-size: 1.5rem;">字体大小为 16px × 1.5 = 24px</p>
  </body>
</html>
```
  即使 body 有不同字体设置，1rem 仍为根元素字体大小的倍数。
计算复杂性差异:
- em：嵌套使用时计算依赖父元素，可能导致级联效应和尺寸预测困难。例如，多层嵌套时子元素的大小会逐级放大或缩小。
- rem：全局一致性高，计算仅依赖根元素，开发者无需关注元素树深，利于管理和调试（如修改根字体时直接更新所有 rem 数值）。
典型使用场景：
- em：适合为单个容器创建相对上下文。当元素的尺寸应与父元素字体大小同步缩放时首选，例如段落内按钮的 padding 或容器的 margin 自适应。
- rem：主导响应式设计和主题一致性需求。用于设置全局元素如导航栏宽高或字体基值，并通过 JavaScript 脚本动态调整 <html> 字体大小来适配各种设备宽高比。在移动端适配流中可结合媒体查询使用。
预测性和可维护性比较:
- rem：单一依赖源带来更高可控性，整体布局容易调整且错误隔离性更强。
- em：灵活但容易引起缩放冲突问题：对父依赖过大在多人协作时需慎防无意覆盖的副作用情形。

总结：优先利用 rem 实现全局变量属性（全栈字体或组件宽高等响应元素）能避免复杂性陷阱，并显著提升代码干净度；必要时才切换到 em——通常专解决基于近距离父级尺寸的灵活部件问题。两种单位各有优势端开发者应了解特性并灵活选取使用位置。