rem 以根元素字体为基准全局缩放，em 依上下文参照父级或自身字体实现组件内自适应；混用需明确尺寸是否随文字变化，避免参照系错乱导致缩放失真。
rem 适合全局缩放，em 适合组件内自适应 —— 混用时必须明确“这个尺寸要不要随组件字体一起变”
rem 只看 html 的 font-size，不继承、不套娃
1rem 永远等于当前 html 元素计算后的 font-size 值，哪怕你嵌套十层，div div div p { width: 2rem; } 依然只按根字体算。这让你能用媒体查询统一调整个页面的缩放比例：
html { font-size: 16px; }
@media (max-width: 768px) {
html { font-size: 14px; } /* 所有 rem 尺寸等比缩小 */
}常见错误是把 html { font-size: 1.2em; } 当成安全写法 —— 实际上它会递归引用自身，行为不可控；也别在 html 上写 font-size: 2rem，虽然合法，但它的参照值是浏览器初始 16px，不是你刚设的值。
真正影响精度的细节：Chrome 对小于 12px 的字体强制取 12px，所以若设 html { font-size: 62.5%; }（即 10px），再用 1.2rem 算出 12px，实际可能被截断为 12px，导致后续计算偏移。更稳的做法是设 html { font-size: 100px; }，再用 0.12rem 表示 12px，避开浏览器下限。
立即学习“前端免费学习笔记（深入）”；
em 在不同 CSS 属性里参照对象不同
很多人卡在“em 到底参照谁”，关键看上下文：
- 在
font-size里：em参照父元素的font-size - 在
padding、margin、width里：em参照**自身当前计算出的font-size**（不是父级，也不是祖先）
比如：
.btn {
font-size: 16px;
padding: 0.5em 1em; /* → 8px 16px，基于按钮自身字体 */
}
.btn .icon {
font-size: 1.2em; /* → 19.2px，基于 .btn 的 16px */
margin-right: 0.5em; /* → 9.6px，基于 .icon 自身的 19.2px */
}嵌套越深，em 越容易失控。如果你没显式设置某一层的 font-size，它就继承父级，而它的 padding 又基于这个继承来的值 —— 这就是“计算链断裂”的源头。
混用 rem 和 em 最常踩的三个坑
不是语法不会，而是参照系切换时机错了：
- 把按钮内边距写成
padding: 0.75rem：文字放大后按钮不撑开，失去“按钮该随文字变大”的语义 - 给整个页面的
font-size都用em（如body { font-size: 1.1em; }），结果媒体查询改html字体时，body的 em 会二次放大，缩放失真 - 在组件内部用
rem控制图标和文字间距（如icon + span { margin-left: 0.5rem; }）：组件字体变大时，间距固定不变，视觉失衡
判断标准很简单：如果这个尺寸的物理意义是“跟着文字一起呼吸”，就用 em；如果是“这个间距/栅格要随屏幕宽度整体缩放”，就用 rem。
用 CSS 自定义属性管理基准值比硬编码更可控
直接写 html { font-size: 16px; } 或 62.5% 会导致后期调整困难。推荐用 --base-font 抽离基准：
:root {
--base-font: 16px;
}
html {
font-size: var(--base-font);
}
.card {
font-size: 1.25rem; /* = 1.25 × 16px */
padding: 1rem; /* = 16px */
}JavaScript 动态适配时，也务必操作 document.documentElement.style.fontSize，而不是 body 或其他节点 —— 否则 rem 失效。另外，rem 不解决高度弹性问题，真要响应视口高度，得靠 vh 或 JS 计算，这点常被忽略。
