px用于固定尺寸，em用于局部弹性（嵌套需谨慎），rem是响应式与全局缩放主力；选错单位即绑错参照物。
直接说结论：px 用于不希望缩放的固定尺寸，em 用于局部弹性（但嵌套要小心），rem 是响应式布局和全局缩放的主力单位——选错单位不是写错代码，而是绑错了参照物。
什么时候必须用 px？
当你需要尺寸绝对稳定、不受任何上下文干扰时，px 是唯一可靠的选择。
- 边框：
border: 1px solid #ccc—— 改字体或视口，边框粗细不能变，否则视觉失衡 - 小图标/装饰线：
width: 24px、height: 24px—— 图标尺寸需与设计稿像素级对齐 - 圆角：
border-radius: 4px—— 过大或过小都会破坏 UI 的精致感 - 阴影偏移：
box-shadow: 0 2px 8px rgba(0,0,0,0.1)—— 像素级控制才保证层次清晰
注意：px 在高清屏（如 Retina）上可能模糊，这不是单位问题，而是渲染策略问题——需要用 transform: scale(0.5) 配合 2px 边框来修复，但基础值仍得是 px。
em 的计算逻辑和典型误用场景
em 不是“相对于父元素”，而是“取决于使用位置”：在 font-size 上，它看父级；在 padding、margin 上，它看自身当前的 font-size。
立即学习“前端免费学习笔记（深入）”；
- 正确用法：
.btn { font-size: 16px; padding: 0.5em 1em; }→ 内边距基于按钮自身的字号，字号变，内边距等比缩放 - 危险嵌套：
.menu li { font-size: 1.2em; } .menu li ul li { font-size: 1.2em; }→ 第三级实际是 16px × 1.2 × 1.2 = 23.04px，失控 - 常见报错现象：
font-size看着设了 1.5em，结果文字比预期大很多，十有八九是父级已放大过
一句话：只在明确知道当前上下文且层级 ≤ 2 的组件内用 em，比如按钮、卡片标题区。别让它跨组件传播。
rem 怎么设才真正生效？
rem 不是“写了就响应”，它依赖根字号（html 的 font-size）是否可控、是否被覆盖。
- 必须显式设置：
html { font-size: 16px; }—— 别依赖浏览器默认，iOS Safari 有时会重置 - 响应式缩放推荐写法：
html { font-size: clamp(14px, 4vw, 18px); }—— 小屏保最小可读性，大屏不撑爆，中间流体过渡 - JS 动态调整时，改的是
document.documentElement.style.fontSize，不是document.body - 无障碍场景下，用户系统字体放大（如 macOS「显示缩放」或 Windows「文本大小」），
rem会自动跟随，px不会
容易忽略的一点：CSS 自定义属性（var(--base-font)）不能直接参与 rem 计算，rem 只认 html 元素的最终计算值，不是变量名。
单位混用时最常踩的坑
真实项目里，px、em、rem 往往共存，冲突点集中在“参照物打架”。
-
font-size: 1.5rem+line-height: 1.5（无单位）→ 行高按当前字号计算，没问题；但若写成line-height: 1.5em，就变成相对于自身字号的 1.5 倍，再乘一次，翻倍 - 用
rem设容器宽度，内部子元素用%做横向布局 → 没问题；但若子元素又用em设font-size，而父容器没设字号，就会继承html的，导致意外放大 - 媒体查询里用
max-width: 768px，但组件内用rem→ 断点本身是固定像素，和rem缩放无关，这是合理的设计分层，别强行统一单位
复杂点在于：单位选择不是语法题，而是设计契约——你得清楚每个值“听谁的”，并确保整个组件树里没有两个互相矛盾的“上级”。一旦发现尺寸飘忽，先查参照链，而不是改数值。
