CSS 单位分为绝对(固定)和相对(随某物缩放)两类。选择恰当的单位对响应式、无障碍布局至关重要。
绝对单位
css
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
对于不应该缩放的元素(边框、小的固定细节)使用 px。
相对单位——重要的几个
css
: ;
: ;
: ;
: ;
: ;
html { font-size: 16px; }
.parent { font-size: 20px; }
.parent .child { font-size: 2em; } /* 2 × 20 = 40px (relative to parent) */
.parent .other { font-size: 2rem; } /* 2 × 16 = 32px (relative to root) */
em 通过嵌套会层叠复合(子元素的子元素会乘法增长),可能导致意外的扩大。rem 始终参考根元素,因此可预测——是字体大小和间距的首选。当你想要相对于局部字体大小的尺寸时使用 em(例如按钮的 padding 随其文本缩放)。
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
对字体大小使用 rem 能尊重设置更大默认字体的用户——这是 px 所破坏的真正无障碍优势。
正确的单位使布局响应式且无障碍:字体/间距使用 rem(可预测 + 尊重用户设置)、流动布局使用 %/vw/vh、固定细节使用 px、局部相对大小使用 em。
较新的视口单位(dvh、svh)还能解决移动设备地址栏高度的问题。