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。
立即学习“前端免费学习笔记（深入）”；
移动端适配时 rem 的常见陷阱
很多老教程教你在 JS 里动态算 html 的 font-size（如 document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px'），现在已不推荐：
- 现代 CSS 原生支持
clamp()和vw，无需 JS 干预 - JS 计算有延迟，页面首屏可能闪动（FOUC）
- 横竖屏切换时，
window.innerWidth变化不一定触发重排，需监听resize，但频繁触发又影响性能 - 如果用了
viewport缩放（如initial-scale=0.5），JS 获取的innerWidth会失真
真正要关注的是：确保设计稿基准宽度（如 375px）和你设定的 rem 基准一致，并统一用 px 到 rem 的转换工具（如 PostCSS 插件），避免手算错误。
rem 的响应能力不来自它自己，而来自你如何控制根元素字号——这个控制点一旦松动，整套字体系统就失去响应意义。
