工具介绍
PX转REM工具是一款面向前端开发的 CSS 单位换算工具，把样式表里写死的 px 数值批量替换成响应式的 rem。粘贴 CSS 或上传样式文件，设定「1rem 等于多少 px」，右侧立刻给出换算结果，原有的缩进、注释与代码结构都不受影响。
除了批量替换，工具还提供小数精度控制与物理边框保护：可以统一保留 2~6 位小数，也可以让 border、border-width、outline 这类表示真实边框粗细的 px 原样不动，避免边框在不同设备上被缩放变形。配合实时转换开关、命中数量统计与一键下载，手工改单位这件琐事可以一次做完。
界面展示
功能亮点
- 实时换算：输入 CSS 自动按当前基准值转换，无需反复点击按钮
- 自定义基准：自由设定 1rem 对应的 px 值，默认按主流浏览器的 16px
- 精度可控：2~6 位小数可选，结果自动去掉多余的尾随零
- 边框保护：可跳过 border、border-width、outline 中的 px，避免物理边框被缩放
- 小数与负值：支持 1.5px、-16px 这类写法，换算后符号与数值照常保留
- 注释安全：注释、字符串与 url() 路径中的数字不会被误替换
- 格式保持：只改动数值和单位，缩进、换行、注释原样保留
- 文件处理：支持拖拽或上传 CSS、SCSS、LESS 等样式文件（限 5MB）
- 一键下载：转换结果可直接导出为 .css 文件
- 复制粘贴：一键把结果复制到剪贴板
- 数量统计：左右两侧分别显示 px 与 rem 的命中数量
- 本地运行：不上传、不联网，样式代码只留在浏览器里
使用方法
- 粘贴代码：把含 px 的 CSS 贴进左侧编辑区，或点击「上传CSS」导入文件
- 设置基准：填写 1rem 对应的 px 值（默认 16），并按需选择小数精度
- 选择保护：勾选「忽略 border / outline 中的 px」以保留物理边框
- 执行转换：开启实时转换后自动更新，也可点击「立即转换」或按 Ctrl+Enter
- 取用结果：在右侧核对 rem 代码，用「复制结果」或「下载CSS」导出
适合人群
- 前端开发者：需要把设计稿尺寸改写成 rem 的开发者
- 响应式页面维护者：希望整套样式随根字号整体缩放的工程师
- Web 设计师：需要把 px 标注稿转成 rem 的设计师
- 全栈工程师：前后端一把抓、经常要快速改单位的工程师
- 前端学习者：正在理解 px 与 rem 区别、练习响应式布局的同学
常见问题解答（FAQ）
rem 和 px 有什么区别？
px 是固定像素，rem 相对于根元素 html 的字体大小。改一次根字号，所有 rem 尺寸就整体缩放，因此更适合响应式布局。
基准值应该填多少？
默认 16px，也就是主流浏览器的默认字号。若项目把 html 字号设成 10px，这里就填 10，换算结果更好读。
小数精度选几合适？
一般 3~4 位就足够精确。位数越多越贴近原值，但代码更长；位数越少越好读，但会引入一点取整误差。
为什么要忽略边框里的 px？
1px 边框通常代表真实屏幕上的一个物理像素，换算成 rem 后会随根字号缩放，可能出现 0.9px 这类模糊粗细，所以默认跳过。
会替换注释里的 px 吗？
不会。注释、字符串以及 url() 路径中的数字都会原样保留，避免误伤。
border-radius 会被忽略吗？
不会。只有 border、border-width、border-top/right/bottom/left（含 -width）以及 outline、outline-width 会被跳过，圆角仍正常换算。
转换结果可以直接用吗？
可以。输出只是替换数值和单位，缩进、换行、注释与选择器都保持原样，可直接覆盖回项目。
支持哪些文件格式？
支持 .css、.scss、.less、.sass、.styl、.txt 等文本样式文件，单文件限 5MB 以内。
上传的代码会被保存吗？
不会。全部换算在浏览器本地完成，没有任何数据发往服务器。
负数和小数怎么办？
-16px 会换算成 -1rem，1.5px 会按所选精度输出对应小数，符号与数值都会被正确保留。
实时转换能关掉吗？
可以。关闭右上角开关后改为手动，点击「立即转换」或按 Ctrl+Enter 才执行。
输出里的 0px 变成了什么？
0px 会写成 0rem，若想彻底省略，可在自己的样式规范里约定零值不写单位。
更新日期：2026-11-03