没有绝对“更好用”的单位，只有场景适配：px适合固定像素场景如border/icon；em用于组件内相对缩放但嵌套易失控；rem是响应式主力但需控制根字号；混用单位会导致隐性耦合。
没有“哪个更好用”的绝对答案，只有“在什么场景下更合适”。选错单位不会报错，但会拖慢开发节奏、增加维护成本，甚至导致缩放异常或响应式失效。
px适合固定尺寸和像素级对齐的场景
当你需要确保一个边框始终是视觉上“一根细线”，或者图标必须严格占满 24×24 像素容器时，px 是唯一可靠的选择。
- 浏览器缩放时，
1px边框可能被渲染为 1.5 像素甚至模糊，但这是设计预期——它本就不该随缩放变粗 -
px在border、icon、hr、box-shadow的偏移值等地方几乎不可替代 - 慎用于字体大小：用户在系统中设置“大号字体”后，
font-size: 14px仍强制显示为 14 像素，可读性下降
em适用于组件内部相对缩放，但嵌套超过两层就容易失控
em 的计算基准会随父元素 font-size 动态变化，这既是优势也是陷阱。它不看根元素，只看“最近那个设了 font-size 的父级”。
- 按钮内文字用
font-size: 0.875em，padding 用0.75em，能自然跟随按钮自身字号缩放 - 如果父容器设了
font-size: 1.2em，子元素再写1.5em，实际就是 1.2 × 1.5 = 1.8 倍根字号，中间过程无法直觉推算 - 用在
margin或padding上时，若元素自身font-size未显式声明，会回退到继承值，结果难预测
rem是响应式布局的主力单位，但必须主动控制根字号
rem 只认 html 元素的 font-size，无论嵌套多深，1rem 永远等于那个值。这意味着你只需改一处，就能批量调整整站尺寸。
- 默认浏览器根字号是
16px，所以1rem === 16px；但别依赖这个默认值，显式写html { font-size: 16px; } - 适配移动端常用做法：
html { font-size: calc(100vw / 375 * 16); }（按 375px 设计稿宽度换算） - JavaScript 动态设置时，注意触发时机：
document.documentElement.style.fontSize应在DOMContentLoaded后执行，否则首次渲染可能取不到正确视口宽 -
rem对字体、间距、容器宽高都友好，但不适合做border-width——没人希望边框随缩放变粗三倍
真正容易被忽略的是单位混用带来的隐性耦合：比如用 rem 写字体，却用 px 写行高，一旦根字号调整，行高就不会同比例变化，行距立刻失衡。单位选择不是孤立决策，而是整个样式体系的契约。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
