软件从业者工具箱

功能说明

在移动端和响应式适配中，把 CSS 里的固定像素批量换算成相对单位（rem 或 vw），或者反向还原成像素，便于核对设计稿。整段 CSS 粘进来即可，注释、选择器和其它属性都会原样保留，只替换带单位的数值。

两个基准参数

• 根字号：html 元素的 font-size，rem 换算的基准。默认 16 是浏览器默认值；如果项目用了 flexible 方案把根字号设成 37.5 或 75，请改成对应数值。
• 基准视口宽度：设计稿宽度，vw 换算的基准。默认 375 对应主流移动端设计稿，750 的二倍图设计稿请填 750。

换算公式

• px 转 rem：数值 除以 根字号
• rem 转 px：数值 乘以 根字号
• px 转 vw：数值 除以 视口宽度 再乘 100
• vw 转 px：数值 除以 100 再乘 视口宽度

选项说明

• 保留小数位：结果四舍五入到指定位数，并自动去掉末尾多余的 0，例如 1.500 会输出 1.5。
• 保留 1px 不转换：常用于 1px 边框和分割线，转成相对单位后在部分设备上会被抹掉或变粗，建议保持勾选。
• 保留 0 值不转换：0px 转换后没有意义，勾选后保持原样。

匹配规则与注意事项

使用正则匹配数值加单位的组合，支持负号和小数（例如 -0.5px、.75rem），单位大小写不敏感。需要注意：工具不解析 CSS 语法树，因此字符串内容、注释里的数值、以及 url() 中恰好形如数值加单位的文本也会被一并替换。转换后建议快速浏览一遍结果，或先在小片段上试转。