📏 CSS 单位速查表
px、em、rem、vw、vh、%等单位详解。含px与rem换算工具和响应式设计建议。
绝对单位
| 单位 | 名称 | 说明 | 1单位= |
|---|---|---|---|
| px | 像素 | 最常用，屏幕物理像素 | 1/96英寸 |
| pt | 磅 | 打印用 | 1/72英寸 |
| cm | 厘米 | 物理单位 | 10mm |
| mm | 毫米 | 物理单位 | — |
| in | 英寸 | 1in=96px | 2.54cm |
相对单位
| 单位 | 相对于 | 说明 | 使用场景 |
|---|---|---|---|
| em | 父元素字体大小 | 1em=父元素font-size | 组件内部 |
| rem | 根元素(html)字体大小 | 1rem=16px(默认) | 全局布局(推荐) |
| % | 父元素 | 相对父元素大小 | 布局宽度 |
| vw | 视口宽度 | 1vw=1%视口宽 | 响应式宽度 |
| vh | 视口高度 | 1vh=1%视口高 | 全屏高度 |
| vmin | 视口较小值 | min(vw,vh) | 移动端适配 |
| vmax | 视口较大值 | max(vw,vh) | 移动端适配 |
| fr | 网格轨道 | Grid布局专用 | CSS Grid |
| ch | 字符宽度 | 数字0的宽度 | 代码块宽度 |
px
px
= 1rem
em和rem的区别？
em是相对于父元素字体大小，嵌套时会累积（父2em × 子2em = 4倍）。rem是相对于根元素(html)字体大小，不会累积，更可预测。实际开发中推荐用rem做全局布局，em做组件内部缩放。
px和rem换算
默认html的font-size是16px，所以 1rem = 16px。换算公式：rem = px ÷ 根字体大小。例如24px ÷ 16 = 1.5rem。常见换算：12px=0.75rem，14px=0.875rem，16px=1rem，18px=1.125rem，20px=1.25rem，24px=1.5rem，32px=2rem。
vw和%有什么区别？
vw是相对于浏览器视口宽度的，%是相对于父元素宽度的。当父元素宽度=视口宽度时，两者结果相同。但嵌套时不同：父元素50%宽，子元素50%是父的50%（即视口的25%），而子元素50vw始终是视口的50%。
响应式设计该用什么单位？
| 场景 | 推荐单位 | 原因 |
|---|---|---|
| 字体大小 | rem | 相对于根元素，可预测 |
| 组件内间距 | em | 随组件字体缩放 |
| 全屏布局 | vh | 100vh=满屏高度 |
| 响应式宽度 | vw或% | 相对于视口或父元素 |
| Grid布局 | fr | 按比例分配空间 |
