| 绝对单位 | |||
|---|---|---|---|
| 1/96 英寸（CSS 参考像素）。 | 固定 UI 尺寸：边框、细线、图标尺寸。 | border: 1px solid #000; | |
| 1/72 英寸（1pt = 1.333px）。 | 打印样式表，尺寸对应实际纸张。 | font-size: 12pt; | |
| 1 厘米（≈37.8px）。 | 需要真实物理尺寸的打印布局。 | margin: 2cm; | |
| 1 毫米（≈3.78px）。 | 精细的打印测量。 | padding: 5mm; | |
| 1 英寸（96px = 2.54cm）。 | 以英寸为单位设定尺寸的打印布局。 | margin: 1in; | |
| 相对字体 | |||
| 元素自身的字号（继承自父元素）。 | 随周围文字一起缩放的间距。 | padding: 1em; | |
| 根元素的字号（html 元素）。 | 字号：尊重用户设置的根字号。 | font-size: 1.25rem; | |
| 当前字体中 '0' 字形的步进宽度。 | 设定可读的行宽（每行字符数）。 | max-width: 70ch; | |
| 当前字体的 x 字高（小写 'x' 的高度）。 | 与字体绑定的垂直度量。 | line-height: 2ex; | |
| 当前字体的大写字高（大写字母的高度）。 | 按大写字高取值的垂直度量，比 ex 更紧凑。 | padding-top: 0.5cap; | |
| 当前字体中 '水'（水）表意字的步进宽度。 | 跟随单个 CJK 字符宽度的尺寸。 | width: 4ic; | |
| 元素自身计算后的行高。 | 以整行文字为单位设定元素尺寸。 | height: 3lh; | |
| 根元素的行高。 | 以文档基础行高为倍数的间距。 | margin-block: 2rlh; | |
| 相对视口 | |||
| 父元素同一属性的值。 | 按容器元素尺寸设定的流式布局。 | width: 50%; | |
| 视口宽度的 1%。 | 按屏幕宽度设定的通栏区块。 | width: 100vw; | |
| 视口高度的 1%。 | 横跨屏幕高度的 hero 区或遮罩层。 | height: 100vh; | |
| 视口较小边的 1%。 | 让元素在任何屏幕方向下都放得下。 | font-size: 5vmin; | |
| 视口较大边的 1%。 | 填满视口的主轴。 | font-size: 5vmax; | |
| 小视口高度的 1%（浏览器界面完全展开）。 | 在展开的浏览器栏之上仍放得下的移动端全高区块。 | height: 100svh; | |
| 大视口高度的 1%（浏览器界面隐藏）。 | 即使浏览器栏收起也必须盖满屏幕的背景层。 | height: 100lvh; | |
| 动态视口高度的 1%，随浏览器界面的显示与隐藏变化。 | 100vh 在移动端的修复方案：浏览器栏出现时高度随之变化。 | height: 100dvh; | |
| 小视口宽度的 1%。 | 对应最窄视口状态的 svh 宽度版。 | width: 100svw; | |
| 大视口宽度的 1%。 | 对应最宽视口状态的 lvh 宽度版。 | width: 100lvw; | |
| 动态视口宽度的 1%，随浏览器界面变化。 | 视口随浏览器栏改变尺寸时的 dvh 宽度版。 | width: 100dvw; | |
| 视口行内轴尺寸的 1%（水平书写模式下为宽度）。 | 跟随书写方向的视口尺寸设定。 | width: 50vi; | |
| 视口块轴尺寸的 1%（水平书写模式下为高度）。 | 在竖排书写模式下仍保持正确的视口尺寸设定。 | height: 50vb; | |
| 流式 | |||
| 受最小值和最大值约束的首选值。 | 永不越过上下限的流式排版。 | width: clamp(320px, 80vw, 1100px); | |
| 逗号分隔参数中的最小值。 | 给尺寸加上限，使其永不超出最大值。 | width: min(100%, 600px); | |
| 逗号分隔参数中的最大值。 | 强制一个随视口增长的最小尺寸。 | width: max(50%, 300px); | |
| 角度 | |||
| 整圆的 1/360。 | 旋转变换和渐变角度位置。 | transform: rotate(45deg); | |
| 弧度；1rad ≈ 57.2958deg。 | 由数学计算得出的角，例如生成的变换。 | transform: rotate(1.5708rad); | |
| 梯度；400grad = 整圆。 | 旧式或测量式的角度值。 | transform: rotate(100grad); | |
| 1turn = 完整的 360° 圆。 | 一眼可读的整圈或半圈旋转。 | transform: rotate(0.5turn); | |
| 时间 | |||
| 一秒。 | 动画和过渡的时长。 | transition: opacity 0.3s; | |
| 一毫秒（1s = 1000ms）。 | 简短的 UI 反馈动画和延迟。 | animation-duration: 150ms; | |
| 分辨率 | |||
| 输出的每英寸点数。 | 面向打印的分辨率媒体查询。 | @media (min-resolution: 300dpi) | |
| 每 px 单位的点数；1dppx 等于标准 96dpi 显示器。 | Retina 和高 DPI 媒体查询。 | @media (min-resolution: 2x) | |
| 每厘米点数（1dppx ≈ 2.54dpcm）。 | 公制单位的分辨率媒体查询。 | @media (min-resolution: 118dpcm) | |