你应该使用哪些 CSS 单位，何时使用？

Question

Accepted Answer

CSS 单位分为**绝对**（固定）和**相对**（随某物缩放）两类。选择恰当的单位对响应式、无障碍布局至关重要。

## 绝对单位

```css
.x { width: 100px; }  /* px — fixed pixels; predictable, doesn't scale */
```

对于不应该缩放的元素（边框、小的固定细节）使用 `px`。

## 相对单位——重要的几个

```css
font-size: 1.5rem;  /* rem — relative to the ROOT font-size (html). Consistent. */
font-size: 1.2em;   /* em — relative to the PARENT's font-size. Compounds! */
width: 50%;         /* % — relative to the parent's size */
width: 50vw;        /* vw — 50% of viewport WIDTH */
height: 100vh;      /* vh — 100% of viewport HEIGHT */
```

## rem vs em——至关重要的区别

```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 随其文本缩放）。

## 为什么相对单位对无障碍很重要

```css
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`）还能解决移动设备地址栏高度的问题。