CSS 单位详解：px、rem、em、vw、vh — 何时使用

CSS 单位概览

CSS 提供了十多种单位类型，每种适用于不同场景。理解何时使用每种单位是构建响应式、可访问且可维护样式表的基础。

单位分为两类：绝对单位，其大小固定，与上下文无关（px、pt、cm、mm、in）；相对单位，其大小相对于其他元素（rem、em、%、vw、vh、ch、ex）。

像素（px）：基础

CSS 像素（1px）最初旨在表示屏幕上的一个物理像素。在现代高 DPI（Retina）显示屏上，这已不再成立。CSS 像素现在定义为在手臂长度下约 1/96 英寸。

使用 px 的场景：边框、盒阴影、特定固定尺寸元素（如图标），以及当你明确不希望尺寸随用户偏好缩放时。

rem：可访问性单位

rem（根 em）相对于 html 元素的字体大小。浏览器默认根字体大小为 16px，因此除非更改，1rem = 16px。

html { font-size: 16px; } /* 默认 */

h1 { font-size: 2rem; }        /* 32px */
p  { font-size: 1rem; }        /* 16px */
.small { font-size: 0.75rem; } /* 12px */

可访问性优势在于用户可以在浏览器设置中设置偏好的基础字体大小。使用 rem 设置尺寸的元素会尊重此偏好；使用 px 的则不会。为符合可访问性标准（WCAG），字体大小应使用 rem。

em：上下文单位

em 相对于当前元素的字体大小。这可能会以意想不到的方式级联：

.parent { font-size: 20px; }
.child  { font-size: 0.75em; }      /* 15px (0.75 x 20) */
.grandchild { font-size: 0.75em; }  /* 11.25px (0.75 x 15) */

em 适用于应随元素自身文本大小按比例缩放的间距（内边距、外边距）。对于字体大小，优先使用 rem 而非 em，以避免级联复杂性。

视口单位：vw、vh、vmin、vmax

视口单位相对于浏览器窗口大小：

常见用法：

.hero { height: 100vh; }           /* 全屏英雄区域 */
.fluid-text { font-size: 4vw; }    /* 文本随窗口缩放 */
.max-width { max-width: 90vw; }    /* 视口宽度的 90% */

在移动浏览器上，100vh 包含浏览器 chrome。使用 100svh 使内容在移动端无需滚动即可适配。

百分比（%）：相对于父元素

百分比值相对于父元素：

.container { width: 800px; }
.child { width: 50%; }  /* 400px */

对于内边距和外边距，百分比值相对于父元素的宽度（即使对于垂直方向的内边距/外边距也是如此）：

.aspect-ratio-box {
  padding-top: 56.25%; /* 创建 16:9 宽高比 */
}

ch：基于字符的宽度

1ch 等于当前字体中字符 "0" 的宽度：

input { width: 20ch; }    /* 容纳约 20 个字符 */
p { max-width: 65ch; }    /* 最佳阅读行宽 */

正文文本的最佳阅读行宽为 45-75 个字符（大多数字体中约 65ch）。

CSS 单位快速参考

转换公式

px 转 rem：rem = px / 根字体大小
rem 转 px：px = rem * 根字体大小

px 转 vw：vw = (px / 视口宽度) * 100
px 转 em：em = px / 当前元素字体大小

-> 试试 CSS 单位转换器