理解 em 与 rem 的基本概念
什么是 em
在 CSS 中，em 是相对于当前元素的字体大小来计算的单位。无论你设置多深的嵌套，1em 的像素值都会随父级字体大小变化而改变，因此它具有继承性和层级性。例如，当父元素的 font-size 为 16px 时，子元素的 1em 也等于 16px；若再往下嵌套，2em 可能变成 32px，取决于父级的 font-size。
在实际开发中，em 常用于局部放大或缩小文本和控件尺寸，以便与父容器的字号保持同一关系。理解这一点可以帮助你避免字号在深层嵌套时出现意外变化。
什么是 rem
与 em 不同，rem 是相对于根元素的字体大小来计算的单位，通常根元素是 <html>。这意味着无论元素嵌套层级有多深，1rem 的单位都保持与根字号一致。
标准做法是将根字体大小设为可预测的值，例如 根字号常设为 16px，从而 1rem 等于 16px，2rem 等于 32px。这种稳定性使得全局排版更易于维护和响应式设计。
在布局和排版中的行为对比
级联与嵌套的影响
当你在一个元素上使用 1em 时，它会被视为该元素的当前字体大小的倍数，例如父元素是 18px，1em=18px。多层嵌套会不断叠乘，导致最终尺寸迅速增大或缩小。
相比之下，rem 不受嵌套影响，始终等于根元素的字体大小。若根字号保持 16px，任意嵌套层级的 1rem 都是 16px，能降低意外的单位膨胀。
浏览器缩放与可访问性影响
浏览器的文字缩放或操作系统的无障碍设置会改变根字号，导致 rem 随根字号变化而变化，从而实现全局的响应式字体调整。这对提升可访问性特别重要。
相比之下，em 依赖于当前元素的字体大小，缩放时也会随之变化，但在嵌套结构复杂的情况下，它可能导致局部元素相对于父级的大小出现不可预期的增量。
实战应用教程：如何在实际项目中选择与应用
全局排版使用 rem
在全局字体设计中，通常推荐将根字号设为可预测的数值，随后全部字号以 rem 为单位 进行设计，以实现一致的缩放行为。
示例代码展示如何在 CSS 中统一使用 rem：
:root {font-size: 16px; /* 1rem = 16px */
}
html { font-size: 100%; }
body { font-size: 1rem; line-height: 1.5; }
h1 { font-size: 2rem; } /* 32px 偏离浏览器默认时仍保持相对关系 */
p { font-size: 1rem; }
通过使用 变量化和 rem 的组合，你可以方便地通过调整根字号实现整站字体的放大或缩小。
组件内局部使用 em 进行放大
在按钮、标签或图标等组件中，使用 em 进行局部放大可以保持与父容器的相对关系，避免全局字号改变时产生错位。
下面的示例演示了在一个组件中同时结合 rem 与 em 的做法：
:root {--base: 16px;
}
.container {font-size: 1rem; /* 16px */
}
.btn {font-size: 1em; /* 等于 .container 的 font-size = 16px */padding: 0.5em 1em; /* 垂直和水平内边距随字体大小成比例 */
}
.icon {width: 1em; height: 1em; /* 与字体大小保持一致 */
}
在这个架构中，容器级 rem 控制全局尺度，按钮内部再用 em 实现相对扩展，从而实现一致性与灵活性的平衡。
结合 clamp() 实现响应式字体
使用 clamp() 可以在不同视口下自动调整字体大小，同时保持可控的最小与最大值范围，这对于保持阅读体验尤为重要。
以下示例展示了如何将 rem 与视口单位结合，创建自适应标题字号：
:root {--min: 1rem;--max: 2.5rem;
}
h2 {font-size: clamp(1.25rem, 1vw + 0.5rem, 2.5rem);
}
body { font-size: 1rem; }
关键点在于保留根字号稳定性，同时让标题在小屏幕上也可读性强，这就需要对 clamp 的最小/最大值得心定。
避免常见坑：嵌套过深导致的尺寸失控
在深度嵌套的结构中，直接使用大量 em 可能导致字号随嵌套层级快速累乘，造成意外大幅度变大或变小。
解决思路是为全局字号尽量使用 rem，仅在局部组件内使用 em 进行相对放大，并通过媒体查询或 clamp 调整极端情况下的尺寸。
