CSS 单位
px/em/rem/vw/vh/% 等单位对比、何时用哪个
CSS 单位
CSS 有绝对单位和相对单位——理解它们的区别是做好响应式的基础。
学完本章你将： 掌握 px/em/rem/vw/vh/% 的对比和选择。
绝对单位
css
.px { font-size: 16px; } /* 像素——最常用 */
.cm { width: 10cm; } /* 厘米（打印用） */
.mm { width: 100mm; }
.pt { font-size: 12pt; } /* 磅（打印用） */相对单位
css
/* em：相对于父元素 font-size */
.parent { font-size: 20px; }
.child { font-size: 1.5em; } /* 20 × 1.5 = 30px */
/* rem：相对于根元素 <html> font-size（推荐） */
html { font-size: 16px; }
.box { font-size: 1.5rem; } /* 16 × 1.5 = 24px */
.box { padding: 2rem; } /* 32px */
/* vw/vh：视口百分比 */
.full-width { width: 100vw; } /* 视口全宽 */
.half-height { height: 50vh; } /* 视口半高 */
/* %：相对父元素 */
.half { width: 50%; }什么时候用什么
| 场景 | 推荐 | 原因 |
|---|---|---|
| 字号 | `rem` | 可随根字号整体缩放 |
| 间距 | `rem` 或 `px` | 一致性好 |
| 宽度 | `%` 或 `vw` | 响应式 |
| 最大宽度 | `px` | 限制最大值 |
| 边框 | `px` | 不需要缩放 |
| 行高 | 无单位（如 `1.5`） | 相对当前字号 |