CSS 长度单位对照表
px / rem / em / vw / dvh 的适用场景
REFERENCE · 13 ROWS
| 单位 | 相对基准 | 示例 | 适用 |
|---|---|---|---|
| px | 绝对像素 | 16px | 边框、细线 |
| rem | 根字号 | 1rem = 16px | 间距、字号 |
| em | 父元素字号 | 1.2em | 组件内相对缩放 |
| % | 父元素对应值 | width: 50% | 流式布局 |
| vw | 视口宽度 1% | 100vw | 全宽区块 |
| vh | 视口高度 1% | 100vh | 整屏区块 |
| dvh | 动态视口高度 | 100dvh | 移动端全屏 |
| svh | 最小视口高度 | 100svh | 避免地址栏跳动 |
| ch | 字符 0 的宽度 | 60ch | 正文行宽 |
| ex | 字母 x 高度 | — | 微调 |
| fr | 网格剩余空间 | 1fr | Grid 布局 |
| deg / rad / turn | 角度 | 45deg | 旋转 |
| ms / s | 时间 | 200ms | 过渡动画 |
HOW TO USE
怎么用CSS 长度单位对照表
- 打开CSS 长度单位对照表,表格已按主题整理好。
- 在右上角输入关键词可即时筛选,不用上下翻找。
- 需要写文档时点「复制为 Markdown」,直接粘到笔记里。
CSS 长度单位对照表是什么
px / rem / em / vw / dvh 的适用场景。CSS 长度单位对照表按表格整理 13 条常用对照,打开即可查,无需翻文档。
它属于「参考速查」下的「对照表」分类。状态码、编码、单位、国家与货币对照。 同类工具还包含 HTTP 状态码速查表、常用 HTTP 请求头与响应头、MIME 类型对照表 等,可以在分类页一次看全。
适用场景
- 处理与「CSS单位」相关的任务时可以直接用。
- 处理与「px」相关的任务时可以直接用。
- 处理与「rem」相关的任务时可以直接用。
- 处理与「em」相关的任务时可以直接用。
- 处理与「vw」相关的任务时可以直接用。
表格说明
本表共 13 行 4 列,内容按常用程度排序。 表格支持关键词筛选,复制出的 Markdown 可直接用于文档、Wiki 或技术博客。
隐私说明
本工具在浏览器内运行,输入内容不会发送到服务器,也不会被记录。 关闭或刷新页面后,输入即被清空。