CSS 单位 (Units)
CSS 单位是布局的标尺。选对单位，能让你的布局自动适应各种屏幕，极大减少 Media Query 的代码量。
1. 绝对长度单位 (Absolute Lengths)
这类单位与屏幕物理尺寸挂钩，不随容器或字体变化。
| 单位 | 描述 | 换算关系 (基准) | 适用场景 |
|---|---|---|---|
px | 像素 | 1px = 1/96 英寸 | 边框 (border)、阴影、极其精细的定位。在屏幕上它是逻辑像素，不是物理像素。 |
cm / mm | 厘米 / 毫米 | 1cm = 37.8px | 打印样式表 (@media print)。在屏幕上不准确。 |
in | 英寸 | 1in = 96px | 打印。 |
pt | 点 (Point) | 1pt = 1/72 英寸 | 打印、Word 文档排版习惯。 |
2. 相对长度单位 (Relative Lengths)
这类单位是响应式设计的基石。
2.1 字体相对单位 (Font-relative)
| 单位 | 基准 (Relative to) | 核心特性 | 最佳实践 |
|---|---|---|---|
em | 父元素的字号 | 继承性。多层嵌套会累乘 (1.2 * 1.2 * 1.2)。 | 用于组件内部的 Padding / Margin / Radius。当组件字号变大，间距自动变大。 |
rem | 根元素 (html) 的字号 | 稳定性。全页面统一基准，无复利计算。 | 用于 Font-size 和整体布局间距。 |
ch | 字符 0 的宽度 | 约等于半角字符宽。 | 限制文本阅读宽度 (max-width: 65ch)。 |
ex | 字符 x 的高度 | 约等于 0.5em。 | 垂直对齐微调。 |
lh (新) | 当前元素的行高 | line-height。 | 绘制与行高对齐的背景色块。 |
ic (新) | 字符 水 的宽度 | CJK (中日韩) 文字宽度。 | 控制中文排版宽度。 |
2.2 视口相对单位 (Viewport-relative) v1.0
| 单位 | 基准 | 描述 | 常见坑点 |
|---|---|---|---|
vw | 视口宽度的 1% | 包含滚动条宽度。 | 100vw 可能会导致横向滚动条。 |
vh | 视口高度的 1% | 在移动端，地址栏收缩会导致 100vh 高度跳变或遮挡。 | |
vmin | min(vw, vh) | 选取宽高中较小的一边。 | 保证物体在横竖屏下都能完整显示在屏幕内。 |
vmax | max(vw, vh) | 选取宽高中较大的一边。 | 全屏大背景。 |
2.3 视口相对单位 (Viewport) v2.0 —— 解决移动端痛点
(现代浏览器 Chrome 108+, Safari 15.4+ 支持)
| 单位 | 全称 | 解决的问题 | 推荐场景 |
|---|---|---|---|
svh | Small Viewport Height | 移动端地址栏展开时（可视区域最小）的高度。 | 底部按钮、Tab栏。防止被地址栏遮挡。 |
lvh | Large Viewport Height | 移动端地址栏收起时（可视区域最大）的高度。 | 全屏沉浸式背景图。 |
dvh | Dynamic Viewport Height | 随地址栏伸缩实时变化。 | 追求完美贴合，但拖动时会触发重排，有性能损耗。 |
svw, lvw, dvw | 对应的宽度单位 | (通常宽度不变，用的少) | - |
3. 容器查询单位 (Container Query Units)
(需要配合 container-type 使用)
| 单位 | 描述 | 革命性意义 |
|---|---|---|
cqw | 查询容器宽度的 1% | 组件级响应式。 |
cqh | 查询容器高度的 1% | 让组件根据自己所在的“坑位”大小自动调整字号，而不是根据屏幕大小。 |
cqi | 行内方向尺寸 (Inline Size) | 通常等同于宽度。 |
cqb | 块轴方向尺寸 (Block Size) | 通常等同于高度。 |
css
.card {
container-type: inline-size;
}
.card h2 {
font-size: 5cqi; /* 标题字号永远是卡片宽度的 5% */
}4. 角度与时间单位 (其他)
- 角度:
deg(度),rad(弧度),turn(圈,1turn = 360deg). - 时间:
s(秒),ms(毫秒). - 分辨率:
dpi,dppx(dots per pixel unit).
5. 常见问题 (FAQ) 与 避坑指南
5.1 移动端 100vh 被地址栏遮挡怎么办？
现象: 在 iOS Safari 或 Chrome 上，设置 height: 100vh 的底部按钮，被浏览器的底部工具栏盖住了。
解法:
- 最佳: 使用新单位
height: 100svh;(Small Viewport)。 - 兼容:css
height: 100vh; /* 旧浏览器兜底 */ height: 100svh; /* 新浏览器生效 */
5.2 为什么 width: 100vw 会出现水平滚动条？
原因:
100%: 占据父容器宽度（不含父容器边框，不含滚动条）。100vw: 占据整个视口宽度（包含垂直滚动条的宽度，通常约 15-17px）。- 当页面内容过长出现垂直滚动条时，
100vw><body> width，导致水平溢出。
建议: 布局宽度尽量用 width: 100% 或 auto，除非你需要通过 calc(50vw - 50%) 做全屏突破布局。
5.3 rem 应该设为多少 px 方便计算？
技巧: 浏览器默认字号是 16px。 为了方便计算（比如想要 14px，不想算 14/16=0.875），很多人会把根字号设为 62.5%。
16px * 62.5% = 10px。- 此时
1rem = 10px。 - 想要 14px -> 写
1.4rem；想要 20px -> 写2.0rem。
css
html { font-size: 62.5%; }
body { font-size: 1.6rem; /* 恢复回 16px */ }5.4 为什么 0 不需要单位，但 0% 需要？
- 长度 (
length):0等于0px等于0cm。长度为 0 时单位可省。 - 百分比 (
percentage): 不是长度单位，是比例。虽然在很多属性（如width）中0和0%效果一样，但在hsl(0, 0%, 0%)(颜色) 或transition-duration(时间) 中，单位往往不能乱省或混用。 - 建议: 长度值为 0 时，省略单位 (
margin: 0;)；涉及动画时间或百分比时，保留单位。
5.5 什么时候用 px，什么时候用 rem？
rem: 所有的 字号 (font-size)、大间距 (margin/padding)、容器宽度。这样用户在浏览器调整“默认字号”时，整个页面会整体缩放，无障碍体验好。px: 边框 (border)（1px 边框变粗很难看）、阴影、小圆角、背景图定位。这些通常不需要随文字缩放。
5.6 怎么做等比例缩放的盒子（宽:高 = 16:9）？
旧方案: padding-top 百分比大法。
css
.box {
width: 100%;
padding-top: 56.25%; /* 9 / 16 = 0.5625 */
height: 0;
}新方案: aspect-ratio 属性。
css
.box {
width: 100%;
aspect-ratio: 16 / 9; /* 直接写比例，现代浏览器全支持 */
}