开发者工具

CSS 单位转换器

在线转换 px、rem、em、vw、vh、百分比及绝对长度单位,支持自定义基础字号与视口尺寸。

运行工具

CSS 单位转换器用于在网页开发中常用的度量单位之间进行快速换算。工具支持像素(px)、相对字号单位(em、rem)、百分比(%)、印刷点数(pt)、视口单位(vw、vh)以及实体长度单位(cm、mm、in)。进行换算时,工具会将输入数值先转为像素基准,再算出目标单位值。转换过程依据基础字号以及视口宽高参数:当换算涉及 em、rem 或百分比时,以设定的基础字号(默认 16px)为比例基准;当换算涉及 vw 或 vh 时,则分别参考设定的视口宽度(默认 1920px)和视口高度(默认 1080px)。绝对长度单位则采用标准像素换算比例,例如 1in 对应 96px、1pt 对应 1.33333px。最终计算数值与中间像素值均保留四位小数显示,帮助前端工程师在响应式排版与布局设计中快速校对 CSS 尺寸。

使用说明

  1. 在数值输入框中输入需要转换的数字(留空时默认为 16)。
  2. 在源单位列表中选择输入的单位类型(默认为 px)。
  3. 在目标单位列表中选择需要转换的目标单位(默认为 rem)。
  4. 根据项目样式规范调整基础字号(默认 16px),如涉及视口单位可修改视口宽度(默认 1920px)或高度(默认 1080px)。
  5. 提交后,结果面板将显示换算后的数值以及对应的中间像素值。

示例

  • 将 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。

嵌入此工具

使用以下代码,将这个可直接使用的 SmartPlusLab 工具添加到您的网站。