CSS 单位参考
CSS 长度单位分两类：固定于物理尺寸的绝对单位，以及随字体、父元素或视口缩放的相对单位。做响应式设计时你主要用相对单位 —— 尤其是 rem、% 和视口单位。
更新 2026-07-06
绝对单位
| 单位 | 含义 |
|---|---|
| px | 像素 —— 屏幕的基本单位。1px 是一个设备无关像素。 |
| pt | 点 —— 1/72 英寸。常见于打印样式表。 |
| in | 英寸 —— 1in = 96px = 2.54cm。 |
| cm | 厘米 —— 主要用于打印。 |
| mm | 毫米 —— 主要用于打印。 |
| pc | 派卡 —— 1pc = 12pt = 1/6 英寸。少见。 |
相对单位
| 单位 | 含义 |
|---|---|
| % | 相对父元素对应值的百分比。 |
| em | 相对元素自身的字号。1.5em = 字号的 1.5 倍。 |
| rem | 相对根（html）字号。对一致缩放可预测。 |
| ex | 当前字体的 x 高度（很少使用）。 |
| ch | 当前字体中 '0' 字符的宽度。 |
| vw | 视口宽度的 1%。 |
| vh | 视口高度的 1%。 |
| vmin | 视口较小维度（宽或高）的 1%。 |
| vmax | 视口较大维度的 1%。 |
| fr | CSS 网格容器中可用空间的一份。 |
em 与 rem：关键区别
两者都随字号缩放，但 em 相对当前元素的字号（所以会在嵌套元素中累积），而 rem 始终相对根字号（所以无论嵌套多深都可预测）。拿不准时，尺寸和间距用 rem 最少意外。
相关工具