混用 rem 和 em 会导致字号不可预测，因 em 依赖父级 font-size 而 rem 只读根元素，二者基准不同引发计算链断裂；无单位 line-height 同样隐含 em 行为，加剧跳变。
rem 和 em 混用不是风格问题，是计算链断裂——只要出现，字号就必然不可预测。
为什么混用会导致 computed font-size 突然“变小”或“跳变”
em 的值永远等于「当前元素的 font-size」，而这个值本身可能来自上层 em；rem 则只读 document.documentElement 的 font-size。两者基准不同，一旦共存于同一组件（比如按钮里 font-size: 0.875rem，但 padding: 1.2em），视觉节奏就断了。
常见错误现象：
-
.btn { font-size: 0.875rem; line-height: 1.5em; }→line-height实际按父级字号算，不是按钮自身字号 - 弹窗组件设了
font-size: 0.9em，内部按钮用1.2rem，结果按钮文字比预期小 10% - 开发者工具里看到 computed
font-size: 13.44px，但查不到哪一层贡献了 0.84 倍——八成是 em 和 rem 在某处悄悄相乘了
如何快速定位混用位置
打开 Chrome DevTools，在 Elements 面板选中异常文字元素，切到 Computed 标签页，直接看 font-size 行右侧的「source」链接。点进去，逐层往上翻：如果看到某条规则是 font-size: 0.875em，而它的父级又是 font-size: 1.2rem，这就是典型混用现场。
实操建议：
- 在项目根 CSS 加一行调试：
html { outline: 1px solid red !important; }，快速识别哪些区域被非根字号影响 - 运行时检查根字号是否如预期：
console.log(parseFloat(getComputedStyle(document.documentElement).fontSize)) - 用浏览器插件（如 “CSS Peeper”）扫描页面，筛选出所有含
em的font-size声明，重点审查它们的父级是否也用了相对单位
修复策略：分场景切断混用链
不能一刀切禁用 em，也不能全盘转 rem——关键在于明确每个单位的职责边界。
- 全局尺寸（字体、间距、圆角、栅格）统一用
rem，且只通过:root调整基准 - 局部缩放行为（图标字体、
border-width、line-height无单位值）才用em或无单位数字 - 禁止在同一个选择器里同时出现
rem和em的font-size相关声明 - 若设计稿给的是 px，换算前先确认当前项目根字号：不是默认 16px，而是运行时
getComputedStyle(document.documentElement).fontSize的值
最常被忽略的一点：即使你没写 em，line-height: 1.5 这种无单位值，本质就是 1.5em，它仍会继承父级字号。所以「混用」不只出现在显式单位中，也藏在看似安全的无单位数值里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
