本指南提供了 CSS 单位的全面参考，旨在帮助开发者在网页布局、排版、颜色和响应式设计中实现精确控制。开发者可通过本指南快速查找各类单位及其用法，并结合实际示例应用于真实项目。内容覆盖了所有 CSS 单位类型，包括绝对长度单位、相对长度单位、视口单位、容器查询单位、百分比单位、角度单位、时间单位、频率单位、分辨率单位、颜色单位、函数单位以及 CSS 网格单位。每一类都按功能分类，便于快速查阅和实际开发中灵活使用。
📊 Absolute Length Units
Unit
Description
Conversion
Example
Use Cases
Browser Support
px
像素 - 设备像素
1px = 1/96 inch
width: 300px
屏幕布局、边框、阴影
所有浏览器
cm
厘米
1cm = 37.8px
margin: 2cm
打印样式表、物理测量
所有浏览器
mm
毫米
1mm = 3.78px
border: 1mm solid
打印、精确测量
所有浏览器
in
英寸
1in = 96px
page-break-after: 2in
打印布局、大尺寸测量
所有浏览器
pt
点
1pt = 1.33px
font-size: 12pt
排版、打印
所有浏览器
pc
派卡
1pc = 16px
line-height: 1.5pc
印刷排版、列宽
所有浏览器
Q
四分之一毫米
1Q = 0.25mm
margin: 4Q
打印布局、高精度测量
现代浏览器
📊 Relative Length Units
Unit
Description
Relative To
Example
Use Cases
Browser Support
em
Em 单位
父元素字体大小
font-size: 1.2em
排版、相对文本间距
所有浏览器
rem
根 em 单位
根元素字体大小
margin: 2rem
一致间距、可伸缩布局
IE9+
ex
x 高度
当前字体中小写 x 的高度
line-height: 2ex
排版、垂直对齐
所有浏览器
ch
字符宽度
当前字体中 '0' 的宽度
width: 40ch
文本容器、等宽布局
IE9+
cap
大写字母高度
当前字体中大写字母高度
margin-top: 1cap
排版、垂直间距
现代浏览器
ic
表意文字宽度
CJK 表意文字宽度
width: 20ic
东亚排版
现代浏览器
lh
行高
元素行高
margin: 1lh
垂直节奏、间距
现代浏览器
rlh
根行高
根元素行高
padding: 0.5rlh
一致垂直间距
现代浏览器
📊 Viewport Units
Unit
Description
Calculation
Example
Use Cases
Browser Support
vw
视口宽度
视口宽度的 1%
width: 50vw
全宽布局、响应式设计
IE9+
vh
视口高度
视口高度的 1%
height: 100vh
全高区块、Hero 区域
IE9+
vmin
视口最小单位
视口较小维度的 1%
font-size: 4vmin
方形元素、响应式排版
IE9+
vmax
视口最大单位
视口较大维度的 1%
width: 50vmax
响应式布局、自适应设计
IE9+
vi
内联视口
视口内联方向的 1%
padding: 2vi
逻辑属性、国际化布局
现代浏览器
vb
块视口
视口块方向的 1%
margin: 3vb
逻辑属性、书写模式
现代浏览器
dvw
动态视口宽度
动态视口宽度的 1%
width: 100dvw
移动端布局、地址栏处理
现代浏览器
dvh
动态视口高度
动态视口高度的 1%
height: 100dvh
移动全屏、高度动态 UI
现代浏览器
lvw
大视口宽度
大视口宽度的 1%
max-width: 90lvw
移动布局、UI 展示状态
现代浏览器
lvh
大视口高度
大视口高度的 1%
min-height: 100lvh
移动布局、最大视口
现代浏览器
svw
小视口宽度
小视口宽度的 1%
width: 100svw
移动布局、UI 隐藏状态
现代浏览器
svh
小视口高度
小视口高度的 1%
height: 100svh
移动布局、最小视口
现代浏览器
📊 Container Query Units
Unit
Description
Calculation
Example
Use Cases
Browser Support
cqw
容器查询宽度
容器宽度的 1%
width: 50cqw
基于容器的响应式设计
现代浏览器
cqh
容器查询高度
容器高度的 1%
height: 80cqh
容器布局
现代浏览器
cqi
容器查询内联
容器内联尺寸的 1%
padding: 2cqi
逻辑容器布局
现代浏览器
cqb
容器查询块
容器块尺寸的 1%
margin: 1cqb
块方向容器尺寸
现代浏览器
cqmin
容器查询最小值
容器较小维度的 1%
font-size: 3cqmin
基于容器的排版
现代浏览器
cqmax
容器查询最大值
容器较大维度的 1%
border-radius: 2cqmax
基于容器样式
现代浏览器
📊 Percentage Units
Unit
Description
Relative To
Example
Use Cases
Browser Support
%
百分比
父元素对应属性
width: 50%
灵活布局、响应式设计
所有浏览器
📊 Angle Units
Unit
Description
Conversion
Example
Use Cases
Browser Support
deg
度
360deg = 完整圆
transform: rotate(45deg)
旋转、渐变
所有浏览器
grad
梯度
400grad = 完整圆
transform: rotate(100grad)
数学计算、渐变
所有浏览器
rad
弧度
2π rad = 完整圆
transform: rotate(1.57rad)
数学变换
所有浏览器
turn
圈数
1turn = 完整圆
transform: rotate(0.25turn)
直观旋转、动画
IE9+
📊 Time Units
Unit
Description
Conversion
Example
Use Cases
Browser Support
s
秒
1s = 1000ms
transition-duration: 2s
动画、过渡
所有浏览器
ms
毫秒
1000ms = 1s
animation-delay: 500ms
精确计时、快速动画
所有浏览器
📊 Frequency Units
Unit
Description
Conversion
Example
Use Cases
Browser Support
Hz
赫兹
1Hz = 每秒 1 次循环
CSS 中不常用
音频相关属性（未来）
有限支持
kHz
千赫兹
1kHz = 1000Hz
CSS 中不常用
音频相关属性（未来）
有限支持
📊 Resolution Units
Unit
Description
Definition
Example
Use Cases
Browser Support
dpi
每英寸点数
物理每英寸点数
@media (min-resolution: 300dpi)
高 DPI 显示、打印
IE9+
dpcm
每厘米点数
物理每厘米点数
@media (min-resolution: 118dpcm)
公制测量、打印
IE9+
dppx
每 CSS 像素点数
每 CSS 像素的设备像素
@media (min-resolution: 2dppx)
Retina 显示、像素比
IE9+
x
dppx 别名
与 dppx 相同
@media (min-resolution: 2x)
Retina 显示、简化语法
现代浏览器
📊 Color Units
Unit
Description
Format
Example
Use Cases
Browser Support
\#
十六进制
#RRGGBB 或 #RGB
color: #ff0000
标准颜色表示
所有浏览器
rgb()
RGB 函数
rgb(r, g, b)
color: rgb(255, 0, 0)
精确颜色控制
所有浏览器
rgba()
带透明度的 RGB
rgba(r, g, b, a)
background: rgba(255, 0, 0, 0.5)
透明颜色
IE9+
hsl()
HSL 函数
hsl(h, s%, l%)
color: hsl(0, 100%, 50%)
直观颜色选择
IE9+
hsla()
带透明度的 HSL
hsla(h, s%, l%, a)
background: hsla(0, 100%, 50%, 0.5)
透明 HSL
IE9+
hwb()
HWB 函数
hwb(h w% b%)
color: hwb(0 0% 0%)
替代颜色模型
现代浏览器
lab()
Lab 函数
lab(l a b)
color: lab(50% 20 -30)
感知色彩空间
现代浏览器
lch()
LCH 函数
lch(l c h)
color: lch(50% 40 180)
圆柱 Lab 色彩空间
现代浏览器
oklab()
OKLab 函数
oklab(l a b)
color: oklab(0.5 0.2 -0.3)
改进的 Lab 色彩空间
现代浏览器
oklch()
OKLCH 函数
oklch(l c h)
color: oklch(0.5 0.4 180)
改进的 LCH 色彩空间
现代浏览器
color()
Color 函数
color(space r g b)
color: color(display-p3 1 0 0)
广色域颜色空间
现代浏览器
📊 Function Units
Unit
Description
Calculation
Example
Use Cases
Browser Support
数学计算
组合不同单位
width: calc(100% - 20px)
混合单位计算
IE9+
min()
最小值
返回最小值
width: min(100px, 50%)
响应式约束
现代浏览器
max()
最大值
返回最大值
width: max(200px, 50%)
响应式最小值
现代浏览器
clamp()
限制值
clamp(min, preferred, max)
font-size: clamp(1rem, 4vw, 2rem)
响应式限制
现代浏览器
attr()
属性值
使用 HTML 属性值
width: attr(data-width px)
从 HTML 动态获取
有限支持
var()
CSS 变量
使用自定义属性
color: var(--main-color)
CSS 自定义属性
IE11+（部分），现代浏览器
📊 Grid Units
Unit
Description
Definition
Example
Use Cases
Browser Support
fr
分数单位
可用空间分数
grid-template-columns: 1fr 2fr
CSS Grid 布局、灵活列
IE10+（需 -ms-）
Quick Examples
css
CSS Code
📋 复制
🚀 在线试试
/* 混合绝对与相对单位 */
.container {
width: calc(100vw - 2rem);
max-width: 1200px;
padding: 1em 5%;
}
/* 响应式排版 clamp */
.heading {
font-size: clamp(1.5rem, 4vw, 3rem);
line-height: 1.2;
margin-bottom: 1em;
}
/* 视口单位全屏布局 */
.hero {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
}
/* 容器查询单位组件样式 */
.card {
width: 100cqw;
padding: 2cqi;
font-size: clamp(0.875rem, 3cqw, 1.25rem);
}
/* CSS Grid 分数单位 */
.grid-layout {
display: grid;
grid-template-columns: 200px 1fr 2fr;
gap: 1rem;
}
最佳实践与建议：
使用相对单位（rem, em, %）创建可扩展且易访问的设计。推荐使用 rem 代替 em 以保证设计中的一致间距。谨慎使用视口单位（vw, vh），因为它们不考虑滚动条。可以使用 clamp() 实现响应式排版平滑过渡。利用 calc() 灵活组合单位以创建复杂响应式布局。使用 px 控制边框、阴影及装饰性元素。在支持的浏览器中测试容器查询单位。CSS Grid 中使用 fr 单位可实现灵活直观布局。了解新单位（如 dvh, lvh, svh）的浏览器支持情况。考虑逻辑单位（vi, vb）以适应国际化布局。HSL/HSB 色彩单位方便色彩调整与主题化。为新单位提供老浏览器兼容方案。跨不同设备和屏幕尺寸测试单位组合效果。