rem 只相对根元素 font-size，稳定适合全局布局；em 相对自身 font-size，适合组件内弹性尺寸。混用时需按是否随组件字体变化来选择参照系。
rem 和 em 看似都是“相对单位”，但它们的参照对象完全不同——rem 永远只看 html 元素的 font-size，而 em 会逐层向上找父元素的 font-size，嵌套越深，计算越容易失控。
rem 只认 html 的 font-size，不继承、不套娃
这是它最核心的稳定性来源。只要没手动改 html 的字体大小，1rem 就始终等于浏览器默认的 16px（除非用户缩放或系统设置干预）。
- 媒体查询中直接调整
html { font-size: 14px; }，所有用rem定义的margin、padding、font-size会同步等比缩放 -
rem不受组件内部字体变化影响，适合做栅格系统、间距体系、字体层级等全局控制 - 注意：在
html元素上写font-size: 2rem是合法的，但它参照的是根元素的初始值（即 16px），不是当前计算后的值
em 的参照对象是“当前元素的 font-size”，不是父元素的 font-size
很多人误以为 em 总是继承父级字体，其实不然：em 在 font-size 属性里，参照的是父元素；但在 padding、margin、width 等属性里，参照的是**自身当前计算出的 font-size**。
- 如果
.btn { font-size: 16px; padding: 0.5em 1em; }，那padding是基于按钮自身的 16px 计算，不是父容器的字体 - 嵌套时若父元素
font-size: 20px，子元素未设font-size，则子元素font-size: 1em= 20px；此时子元素的padding: 1em= 20px，而非父级的 20px × 1 - 这种“自身字体驱动自身尺寸”的特性，让
em天然适合按钮内边距、图标与文字间距、行高（line-height: 1.5实际就是1.5em）等局部弹性场景
混用 rem 和 em 时最容易踩的坑
常见错误不是“不会用”，而是“不知道什么时候该切换参照系”。比如把按钮的 padding 写成 rem，结果文字变大时按钮不撑开；或者把整个页面的 font-size 都用 em，导致媒体查询失效。
立即学习“前端免费学习笔记（深入）”；
- 别在组件内部用
rem控制内边距——它不会随组件字体变化，失去“自适应”意义 - 别在根元素上用
em设置font-size：html { font-size: 1.2em; }会递归引用自身，行为不可控 - 用 CSS 自定义属性管理基准值更安全：
:root { --base-font: 16px; }，然后html { font-size: var(--base-font); }，后续可统一替换 - JavaScript 动态设置根字体时，务必用
document.documentElement.style.fontSize，而不是操作body或其他元素
真正难的不是记住“rem 相对根，em 相对自己”，而是判断某个尺寸是否需要跟随组件字体变化——这决定了你该切到哪个参照系。多数时候，布局骨架用 rem，组件毛细血管用 em，边界模糊处靠具体行为验证，而不是凭感觉写死。
