rem 是相对于根元素 font-size 的缩放单位，1rem 默认等于 16px，通过动态设置 html 字号可实现整体等比缩放，适用于响应式布局与无障碍适配；em 相对于父元素字号，易因嵌套导致级联失控，适合局部弹性排版；px 是设备独立像素，尺寸固定，适用于边框、圆角等非文本类样式。
rem 是相对于根元素 font-size 的缩放单位
浏览器默认根元素（html）的 font-size 是 16px，所以 1rem === 16px。只要改了 html 的 font-size，所有用 rem 定义的字体、间距都会等比缩放——这是它被广泛用于响应式布局的核心原因。
常见做法是配合 JS 动态设置：
document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px'; // 以 375px 设计稿为基准或者用媒体查询做断点适配：
@media (max-width: 768px) {
html { font-size: 14px; }
}
@media (min-width: 769px) {
html { font-size: 16px; }
}
- 适合需要整体缩放的场景，比如移动端适配、无障碍放大模式支持
- 注意：嵌套组件中若手动修改了某层
font-size，不会影响rem计算——它只认html根字号 - Vue/React 项目里，如果用了 CSS-in-JS 或 scoped style，仍可正常使用
rem，但需确保根字号已正确设置
em 是相对于父元素 font-size 的相对单位
em 的值取决于直接父元素的 font-size。比如父元素是 20px，子元素写 1.5em，那它就是 30px；如果父元素本身也是用 em 设置的，就会产生级联计算，容易失控。
典型误用：
.box { font-size: 1.2em; } /* 相对于 body 或 html 的字号 */
.box p { font-size: 1.2em; } /* 这里是相对于 .box 的字号，不是原始根字号 */
- 适合局部弹性排版，比如按钮文字随容器缩放、图标字体与文本对齐
- 慎用于多层嵌套结构，尤其当父级
font-size来自em或%时，数值会指数级漂移 - 和
line-height搭配时，em是推荐单位，因为它的行为更符合行高“相对于当前字号”的语义
px 是绝对像素单位，不随缩放或父级变化
px 在 CSS 中不是物理像素，而是设备独立像素（CSS pixel），在多数场景下表现稳定。它不会因为用户缩放网页、修改系统字体大小而改变尺寸——这既是优点也是缺点。
- 适合固定尺寸的图形、边框、阴影偏移等非文本类样式
- 不适合用于需要适配高 DPI 屏幕或支持系统字体放大的文本内容（比如 iOS「更大字体」辅助功能下，
px文字不会变大） - 现代开发中，
px常和rem混用：用rem控制字号，用px控制 border、border-radius 等不影响阅读节奏的细节
实际项目中怎么选：看是否需要「可继承」或「可缩放」
判断逻辑很直接：如果这个尺寸应该随用户系统设置、页面整体缩放或设计稿比例变化，就用 rem；如果它只是某个组件内部的相对关系（比如图标比文字小一号），且不希望被外部干扰，优先考虑 em；如果它必须精确到像素级、且和文本流无关，用 px。
立即学习“前端免费学习笔记（深入）”；
- 标题层级（
h1~h6）、正文、段落间距 → 推荐rem - 按钮内边距、卡片圆角、分割线粗细 → 推荐
px - 图标字体（如 iconfont）的
font-size→ 推荐em，方便与相邻文字自动对齐 - 媒体查询中的断点值 → 必须用
px（CSS 规范限定）
最易被忽略的一点：Chrome 开发者工具里，鼠标悬停在 computed 样式上时，会同时显示该值的 px 实际解析结果——这是验证你写的 rem/em 是否按预期生效的最快方式。
