CSS 单位转换器怎么用：px、rem、em 和 vw 换算指南

先了解换算范围

CSS 单位转换器用于把数值从一种 CSS 单位换算成另一种单位，适合整理设计稿尺寸、调整排版比例，或检查不同单位之间的数值关系。它支持 px、em、rem、%、vw、vh、pt、cm、mm 和 in 作为输入或输出单位。

按参数完成换算

1. 输入要换算的数值；如果不填写，数值默认为 16。
2. 选择输入单位和输出单位。未指定时，输入单位默认为 px，输出单位默认为 rem。
3. 如需换算相对单位，请填写基准字号。未填写时基准字号为 16。
4. 如果使用 vw 或 vh，请根据页面场景填写视口宽度或高度；默认视口宽度为 1920，高度为 1080。
5. 提交换算并查看结果。换算会先得到像素值，再转换为目标单位；成功结果中的换算值和中间像素值都会保留四位小数。

例如，要把 24 px 换算为 rem，可将数值设为 24，输入单位设为 px，输出单位设为 rem，并保留基准字号 16。若换算 vw 或 vh，应确认使用的视口尺寸符合你的页面设定。

读懂结果与适用边界

结果中的目标数值表示换算后的单位值，中间像素值用于连接输入单位和输出单位。例如，在基准字号为 16 时，16 px 换算为 rem，成功结果中的目标值为 1.0；这类结果还会包含经过四位小数处理的中间像素值。

需要特别留意相对单位的参照条件：em 和 rem 输入会乘以基准字号，百分比输入会乘以基准字号再除以 100，vw 和 vh 输入分别参考视口宽度与高度。若基准字号为 0，换算为 em、rem 或百分比时结果为 0；目标为 vw 或 vh 且对应视口尺寸为 0 时，结果也为 0。

单位标签会先转换为小写。无法识别的输入单位会按像素值处理，无法识别的输出单位会保留像素值，因此结果不一定能反映你原本想要的单位。换算过程中发生异常时，结果会标记为不成功并包含异常文本。

使用示例

设计稿中的字号是 16 px，开发者希望在基准字号为 16 的页面设置中查看对应的 rem 数值。

将数值设为 16，输入单位选择 px，输出单位选择 rem，基准字号设为 16，然后提交换算。

成功结果包含目标单位的换算值和中间像素值，两者均保留四位小数；目标值为 1.0。

使用限制

• 相对单位换算依赖基准字号或视口尺寸；零值参照条件会触发特定的 0 结果，未识别单位也不会按普通单位校验处理。

常见错误

• 把单位拼写成未识别的标签会导致输入按像素值处理，或让输出保留像素值。请检查单位标签是否属于支持范围，并确认大小写和拼写。

常见问题

不填写参数时会使用什么默认值？

如果没有填写参数，数值默认为 16，输入单位默认为 px，输出单位默认为 rem；基准字号默认为 16，视口宽度和高度分别默认为 1920 与 1080。

哪些 CSS 单位可以互相转换？

可以。px、em、rem、%、vw、vh、pt、cm、mm 和 in 都可以作为输入或输出单位，但相对单位的结果会受到基准字号或视口尺寸影响。

换算结果会保留几位小数？

成功结果中的换算值和中间像素值都会四舍五入到四位小数；例如基准字号为 16 时，16 px 换算为 rem 的目标值为 1.0。