一、绝对单位
概念：绝对单位是固定大小，不随环境变化。
常用单位：
其他单位：
常用单位：
px（像素）其他单位：
cm、mm、in、pt、pc（很少用）
👇 px 像素演示
12px
16px
20px
1/* px 像素（最常用） */
2font-size: 16px;
3width: 200px;
4margin: 10px;
5
6/* 其他绝对单位（很少用） */
7cm, mm, in, pt, pc
二、相对单位
概念：相对单位是相对于其他值变化，更适合响应式设计。
常用单位：
推荐用法：用 rem 做布局，用 em 做组件内部
常用单位：
rem（相对于根元素）、em（相对于父元素）推荐用法：用 rem 做布局，用 em 做组件内部
👇 rem vs em 对比
父元素 font-size: 16px
1rem = 16px（相对于根元素）
1.5rem = 24px
父元素 font-size: 20px
1em = 20px（相对于父元素）
1.5em = 30px
1/* rem 相对于根元素（html 的 font-size） */
2html { font-size: 16px; }
3.box { font-size: 1rem; } /* = 16px */
4.box { font-size: 1.5rem; } /* = 24px */
5
6/* em 相对于父元素 */
7.parent { font-size: 20px; }
8.child { font-size: 1em; } /* = 20px */
9.child { font-size: 1.5em; } /* = 30px */
10
11/* 推荐：用 rem 做布局，用 em 做组件内部 */
三、视口单位
概念：视口单位是相对于浏览器窗口大小，非常适合响应式设计。
常用单位：
常用单位：
vw — 视口宽度的 1%vh — 视口高度的 1%vmin — vw 和 vh 中较小的那个vmax — vw 和 vh 中较大的那个
👇 视口单位演示
width: 50vw（视口宽度的50%）
width: 80vw（视口宽度的80%）
1/* vw 视口宽度 */
2.full-width { width: 100vw; }
3.half-width { width: 50vw; }
4
5/* vh 视口高度 */
6.full-height { height: 100vh; }
7
8/* vmin/vmax */
9.box { font-size: 5vmin; } /* 取 vw 和 vh 中较小的 */
10
11/* 常见用法：全屏英雄区 */
12.hero {
13 width: 100vw;
14 height: 100vh;
15 display: flex;
16 align-items: center;
17 justify-content: center;
18}
四、单位对比表
| 单位 | 参照物 | 适用场景 |
|---|---|---|
| px | 无（绝对） | 边框、阴影、精确尺寸 |
| rem | 根元素 font-size | 字体、间距、布局 |
| em | 父元素 font-size | 组件内部相对缩放 |
| % | 父元素对应属性 | 响应式布局 |
| vw/vh | 视口宽/高 | 全屏布局、响应式 |
| vmin/vmax | 视口较小/较大值 | 移动端适配 |