rem更适合全局缩放与响应式控制，因其基于根元素font-size计算，所有组件共享同一基准，修改一次即可统一调整整站比例；em则适用于局部嵌套场景，但嵌套过深易导致尺寸失控。
Rem 更适合组件化开发中的全局缩放与响应式控制，Em 更适合局部嵌套场景下的相对缩放；选错单位会导致样式意外放大、组件复用时尺寸失控。
Rem 为什么更适合组件库或跨屏适配
Rem 基于根元素 html 的 font-size 计算，所有组件都共享同一基准，修改一次就能统一调整整站缩放比例。比如在移动端通过 JS 动态设置 document.documentElement.style.fontSize = window.innerWidth / 375 * 100 + 'px'，所有 rem 值自动响应。
- 组件内部无需关心父级字体大小，避免嵌套污染
- 配合 PostCSS 插件（如
postcss-pxtorem）可将写死的px自动转为rem，降低维护成本 - Vue/React 组件库（如 Element Plus、Ant Design）默认用
rem或em配合 CSS 变量做主题缩放，但底层逻辑仍是根字号驱动
Em 在什么情况下不能乱用
Em 是相对于父元素 font-size 的倍数，嵌套层级一多就容易指数级放大。比如父级设了 font-size: 1.2em，子元素再写 font-size: 1.2em，实际就是 1.44em（1.2 × 1.2），三层嵌套后可能变成 1.728em。
- 组件内部按钮图标尺寸用
em没问题，但整个卡片组件的外边距、宽度别用em - 当组件被插入到不同字号上下文中（比如富文本编辑器里嵌入 UI 组件），
em值会随宿主环境漂移，导致布局错位 -
line-height和vertical-align等属性仍推荐用无单位数值或em，因为它们本意就是相对行高计算
混合使用的安全边界在哪
真正健壮的组件化方案不是非此即彼，而是分层约定：根字号用 rem 控制整体缩放，内联排版用 em 或无单位值维持比例关系，固定像素值（如 border、icon svg width）保持不变。
- 容器宽高、间距、圆角统一用
rem - 文字行高、图标与文字垂直对齐、按钮内边距可用
em（前提是父级font-size可控） - 绝对定位偏移、阴影模糊半径等视觉修饰项建议用
px，避免被缩放干扰细节精度
最常被忽略的一点：很多团队用 rem 却忘了重置 html 的初始 font-size。Chrome 默认是 16px，但 iOS Safari 有时会因双击缩放临时修改它，导致 1rem 漂移——必须用 html { font-size: 16px; } 锁死，再通过媒体查询或 JS 动态覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
