CSS 单位参考
免费在线CSS单位参考,按类别整理px、em、rem、%、vw、vh、vmin、vmax、ch等单位的用途与用法,并说明绝对单位与相对单位的换算关系和常见取值场景。 可在编码时于一处快速查阅代码、符号、快捷键等参考信息,在浏览器中即时搜索和复制,无需注册或安装即可免费使用。 结果可一键复制,整个过程简单快捷,无需下载任何软件,在手机和电脑上都能随时流畅使用。
| 单位 | 名称 | 种类 | 说明 | 示例 |
|---|---|---|---|---|
| px | Pixels | absolute | 屏幕上的一个像素。最基本的单位。 | font-size: 16px; |
| em | Em | relative | 父元素字号的倍数。 | padding: 1.5em; |
| rem | Root Em | relative | 根元素(html)字号的倍数。 | margin: 2rem; |
| % | Percent | relative | 相对于父元素对应属性的百分比。 | width: 50%; |
| vw | Viewport Width | viewport | 视口宽度的 1%。 | width: 100vw; |
| vh | Viewport Height | viewport | 视口高度的 1%。 | height: 100vh; |
| vmin | Viewport Min | viewport | vw 与 vh 中较小值的 1%。 | font-size: 5vmin; |
| vmax | Viewport Max | viewport | vw 与 vh 中较大值的 1%。 | width: 50vmax; |
| dvh | Dynamic VH | viewport | 动态视口高度(计入移动端地址栏)。 | height: 100dvh; |
| svh | Small VH | viewport | 最小视口高度。 | min-height: 100svh; |
| lvh | Large VH | viewport | 最大视口高度。 | max-height: 100lvh; |
| ch | Character | relative | 基于字符“0”的宽度。 | max-width: 60ch; |
| ex | X-Height | relative | 基于字符“x”的高度。 | line-height: 2ex; |
| cm | Centimeters | absolute | 厘米。用于打印。 | width: 10cm; |
| mm | Millimeters | absolute | 毫米。用于打印。 | margin: 5mm; |
| in | Inches | absolute | 英寸(1in = 96px)。 | width: 2in; |
| pt | Points | absolute | 磅(1pt = 1/72in)。 | font-size: 12pt; |
| cqi | Container Inline | container | 容器行向尺寸的 1%。 | font-size: 5cqi; |
| cqb | Container Block | container | 容器块向尺寸的 1%。 | padding: 2cqb; |
19개 표시 중
嵌入
最后更新:2026 · 免费在线工具
什么是 CSS 单位参考?
免费在线CSS单位参考,按类别整理px、em、rem、%、vw、vh、vmin、vmax、ch等单位的用途与用法,并说明绝对单位与相对单位的换算关系和常见取值场景。 可在编码时于一处快速查阅代码、符号、快捷键等参考信息,在浏览器中即时搜索和复制,无需注册或安装即可免费使用。 结果可一键复制,整个过程简单快捷,无需下载任何软件,在手机和电脑上都能随时流畅使用。
使用方法
- 1输入— 输入所需数据。
- 2结果— 查看处理结果。
- 3复制— 复制结果使用。
相关工具
PX-REM 转换器以可自定义的根字号为基准在CSS的px和rem单位间双向转换,支持小数值,并提供可复制的参考表和CSS代码片段的免费在线工具 适用于开发和数据处理时需要在 CSV、JSON、颜色、时间等不同格式之间转换的场景,全部在浏览器本地完成,输入数据不会上传服务器,无需安装或注册即可免费使用。 结果可一键复制,整个过程简单快捷,无需下载任何软件,在手机和电脑上都能随时流畅使用。
浏览器兼容性检查免费在线浏览器兼容性查询工具,显示某项CSS、JavaScript、HTML或Web API特性在Chrome、Firefox、Safari和Edge中的支持版本。 可在编码时于一处快速查阅代码、符号、快捷键等参考信息,在浏览器中即时搜索和复制,无需注册或安装即可免费使用。 结果可一键复制,整个过程简单快捷,无需下载任何软件,在手机和电脑上都能随时流畅使用。
CSS 渐变生成器免费在线可视化工具,设计linear、radial、conic渐变,调整颜色停止点和角度,一键复制网页背景的CSS代码。 适合在测试和开发中即时生成所需数值,所有生成过程都在浏览器本地运行,数据不会上传服务器,无需安装或注册即可免费使用。 结果可一键复制,整个过程简单快捷,无需下载任何软件,在手机和电脑上都能随时流畅使用。
CSS 盒子阴影生成器免费在线CSS box-shadow生成器,可调节偏移、模糊、扩散、颜色和内阴影inset并实时预览阴影,生成可复制的box-shadow CSS代码。 适合在测试和开发中即时生成所需数值,所有生成过程都在浏览器本地运行,数据不会上传服务器,无需安装或注册即可免费使用。 结果可一键复制,整个过程简单快捷,无需下载任何软件,在手机和电脑上都能随时流畅使用。
常见问题
免费在线CSS单位参考,涵盖所有CSS长度、角度、时间单位。
不会。所有处理都在浏览器中完成。
是的,响应式设计支持移动设备。