CSS 单位转换

什么是CSS 单位转换？

如何使用CSS 单位转换

1. 1

   选择输入单位：点击页面上的输入单位下拉选择框，在展开的选项列表中，点击选中你当前数值原本使用的CSS单位即可。

2. 2

   设置基准值：在基准值输入框中，填入你当前项目实际配置的根字体大小或者设计稿视口宽度数值，和项目配置保持一致才能得到正确结果。

3. 3

   输入原始数值：在顶部的原始数值输入框中，填写你需要进行转换的原始单位数值，支持填写小数类型的数值。

4. 4

   查看结果：填写完成后会自动在下方结果展示区域，生成所有其他常用CSS单位对应的转换后数值，直接复制使用即可。

什么场景会用到？

计算示例

注意事项

• 默认根字体大小为浏览器常用的16px，若项目设置了自定义根字号，请手动修改本工具的根字号参数，否则转换结果会出错。
• 转换vw/vh时，需要输入实际项目对应的设计稿视口尺寸，默认值为1920px宽、1080px高，不符合设计稿尺寸会导致转换偏差。
• em单位的结果依赖父元素字体大小，工具默认以当前根字体作为计算基准，嵌套场景需要自行调整基准字号参数。
• 仅支持转换常用的px、rem、em、vw、vh、pt单位，不支持ch、ex、percentage等相对特殊单位的转换。

常见问题

参考资料

• W3C CSS Values and Units Module Level 4 官方规范
• MDN Web Docs CSS 值与单位文档

本工具转换逻辑严格遵循W3C CSS单位标准，所有示例结果均经过程序复算验证，由工具集开发编辑组维护，适配主流前端开发项目的单位换算需求。