结论：px用于边框、图标、阴影等需绝对像素控制的场景；rem适配响应式排版；em适用于依赖父级缩放的局部布局；vw/vh仅限视口级拉伸，需警惕可读性破坏。
直接说结论：别用 em 做全局布局，rem 是响应式排版的主力，px 适合边框/图标等需像素级控制的场景，vw/vh 只在真正需要“占满视口”或“随屏幕拉伸”的地方才用——多数时候它们会破坏可读性。
什么时候必须用 px？
px 的不可替代性在于它不参与任何计算链，值即所见。这不是“过时”，而是刚需。
- 1px 边框：高清屏上用
1px+transform: scaleY(0.5)模拟物理像素线，换rem或em会导致缩放后变粗或消失 - 小图标尺寸：比如
.icon { width: 24px; height: 24px; }，若用1.5rem，根字体一调，图标就失比例 - 阴影偏移量：
box-shadow: 0 2px 4px rgba(0,0,0,0.1)中的2px和4px必须稳定，否则模糊程度随设备浮动
rem 和 em 的根本区别在哪？
不是“哪个更高级”，是“谁负责哪一层”。em 看父级 font-size，rem 只看 html 的 font-size —— 这一点决定了你能不能睡安稳觉。
- 用
em写按钮内边距：padding: 0.75em 1.5em，当按钮字体放大，内边距自动撑开，合理 - 但用
em写嵌套菜单层级：.menu li ul { font-size: 0.85em; }，三层嵌套后变成0.85 × 0.85 × 0.85 ≈ 0.61倍，失控 -
rem没这问题：html { font-size: clamp(16px, 4vw, 20px); }，所有1.5rem都按这个基准算，不会滚雪球
vw/vh 容易被误用的三个信号
它们不是“响应式万金油”，而是一把双刃剑。一旦出现以下任一现象，说明该换单位了：
立即学习“前端免费学习笔记（深入）”；
- 文字在手机上小到看不清：
font-size: 4vw在 375px 宽屏幕上 = 15px，已低于可读下限（建议最小 16px） - 侧边栏在大屏上宽得离谱：
width: 30vw在 2560px 屏幕上 ≈ 768px，远超内容承载舒适区（通常 280–320px 更合适） - 元素在竖屏 iPad 上被截断：
height: 100vh包含地址栏高度，实际可视区域常小于100vh，应改用100dvh（如支持）或加容错逻辑
根字号（html font-size）怎么设才不翻车？
设错根字号，rem 就全盘失效。别写死 16px，也别盲目用 vmin。
- 基础方案：
html { font-size: 16px; }+ 媒体查询分段调整，适合中低复杂度项目 - 流体方案：
html { font-size: clamp(14px, 3.5vw, 18px); }，限制上下限，避免极端缩放 - 避开陷阱：不要用
font-size: calc(16px + 0.25vw)无限增长，视口到 4000px 时字体可能飙到 26px，正文阅读体验崩坏
最常被忽略的一点：单位混用本身不是问题，问题在于“混用却没有明确意图”。比如一个 margin: 1rem 0.5em 的声明，你得清楚前一个是基于根字号的节奏感，后一个是为适配当前文本行高的呼吸感——否则就是技术债的起点。
