运行工具
CSS 单位转换器用于在网页开发中常用的度量单位之间进行快速换算。工具支持像素(px)、相对字号单位(em、rem)、百分比(%)、印刷点数(pt)、视口单位(vw、vh)以及实体长度单位(cm、mm、in)。进行换算时,工具会将输入数值先转为像素基准,再算出目标单位值。转换过程依据基础字号以及视口宽高参数:当换算涉及 em、rem 或百分比时,以设定的基础字号(默认 16px)为比例基准;当换算涉及 vw 或 vh 时,则分别参考设定的视口宽度(默认 1920px)和视口高度(默认 1080px)。绝对长度单位则采用标准像素换算比例,例如 1in 对应 96px、1pt 对应 1.33333px。最终计算数值与中间像素值均保留四位小数显示,帮助前端工程师在响应式排版与布局设计中快速校对 CSS 尺寸。
使用说明
- 在数值输入框中输入需要转换的数字(留空时默认为 16)。
- 在源单位列表中选择输入的单位类型(默认为 px)。
- 在目标单位列表中选择需要转换的目标单位(默认为 rem)。
- 根据项目样式规范调整基础字号(默认 16px),如涉及视口单位可修改视口宽度(默认 1920px)或高度(默认 1080px)。
- 提交后,结果面板将显示换算后的数值以及对应的中间像素值。
示例
- 将 16 px 转换为 rem,在基础字号为 16 的情况下,计算得到 1.0 rem。
- 将 192 px 转换为 vw,在视口宽度设为 1920 的情况下,计算得到 10.0 vw。
常见问题
当转换涉及 em 或 rem 时,计算基准是什么?
换算依据设置的基础字号数值。默认基础字号为 16px,因此 1rem 或 1em 对应 16px。如果修改了基础字号,换算比例会相应改变。
视口单位 vw 与 vh 是如何换算的?
vw 换算基于视口宽度(默认 1920px),100vw 等于视口总宽度;vh 换算基于视口高度(默认 1080px),100vh 等于视口总高度。
如果将基础字号或视口尺寸设为 0 会发生什么?
当基础字号设为 0 时,转换为 em、rem 或百分比的计算结果为 0;当对应视口尺寸设为 0 时,转换为 vw 或 vh 的计算结果同样为 0。