em 相对于父元素 font-size，嵌套易失控；rem 始终基于 html 根元素 font-size，更可控，适合响应式字体系统，其响应能力取决于根字号是否动态设置。
em 和 rem 的根本区别在哪
em 是相对于父元素 font-size 的倍数，嵌套层级一多就容易失控；rem 始终基于根元素（html）的 font-size，更可控，适合响应式字体系统。
-
em适合局部微调，比如按钮文字比父容器大 1.2 倍：font-size: 1.2em -
rem适合全局响应式字号，比如标题随屏幕缩放：font-size: 2.5rem - 若
html的font-size用%或vw动态设置，rem值才能真正“响应”
怎么用 vw + rem 实现平滑响应式字体
纯 rem 静态值（如 16px 对应 1rem）无法自适应，必须让根字号动起来。主流做法是用 vw 单位配合断点微调：
- 在
html上设基础响应式字号：font-size: clamp(14px, 4vw, 18px) - 或分段用媒体查询：
@media (max-width: 768px) { html { font-size: 87.5%; } }（即 14px） - 推荐
clamp()：它比媒体查询更平滑，且无需重复写断点 - 注意：
clamp(min, preferred, max)中的preferred用vw时，需测试不同设备实际渲染效果，部分安卓 WebView 对clamp支持不全
为什么直接写 font-size: 1.5em 在响应式里容易出问题
em 的相对性在复杂 DOM 结构中会层层叠加，导致字体尺寸意外放大或缩小：
- 父元素
font-size: 1.2rem，子元素再写font-size: 1.5em→ 实际是1.5 × 1.2rem = 1.8rem - 组件被复用到不同上下文时，同一行 CSS 表现不一致
- 框架组件（如 Ant Design、Element Plus）内部大量用
em做内边距或图标尺寸，若你在外层改了font-size，可能连带影响布局
建议只在明确需要“跟随父文字比例缩放”的场景用 em，例如：line-height: 1.5（无单位）、padding: 0.75em 1em。
立即学习“前端免费学习笔记（深入）”；
