PX 转 REM 计算器 | 免费 CSS 单位换算与对照表

把设计稿 PX 快速换算为 CSS REM,也可从 REM 反推 PX。支持自定义根字号、常用尺寸对照表和 Tailwind spacing 近似参考。

PX / REM 换算

rem = px / root font-size

px
常用根字号
px
rem

常用对照表

PXREMTailwind 近似
4px0.25remp-1
8px0.5remp-2
10px0.625rem-
12px0.75remp-3
14px0.875rem-
16px1remp-4
18px1.125rem-
20px1.25remp-5
24px1.5remp-6
32px2remp-8
40px2.5remp-10
48px3remp-12
64px4remp-16
80px5remp-20
96px6remp-24

如何使用

  1. 在“根字号”中确认项目的 html font-size,常见默认值为 16px。
  2. 在 PX 输入框键入设计稿尺寸,例如 24
  3. REM 输入框会立即显示 1.5rem;也可以反向输入 2rem 推算为 32px
  4. 查看下方对照表,快速核对常见字号、间距或 Tailwind spacing 对应值。

核心功能

  • 双向即时换算:输入 PX 或 REM 均可瞬间得到结果,无需点击计算按钮。
  • 自定义根字号:默认 Base Size 为 16px,可根据项目配置改为 10px、14px 或其他根字号。
  • 内置对照表:常用尺寸会随根字号同步刷新,例如 12px、16px、24px、32px 对应的 REM 值。
  • Tailwind spacing 参考:显示常见像素值对应的 Tailwind spacing token,方便把设计稿间距映射到实用类。
  • 纯本地极速计算:所有换算都在浏览器内存中完成,不依赖网络请求。

相关工具

CSS 压缩与美化工具 - 体积优化与压缩率统计

在线压缩或美化 CSS 代码:移除注释与空白减少体积,并显示节省百分比;也可一键反混淆还原可读格式。全程浏览器本地处理,不上传代码。

JSON 格式化校验与 TS 类型生成 - 在线美化、压缩与修复

免费在线 JSON 工具:一键美化/压缩、语法校验、错误高亮,并自动生成 TypeScript 接口与 Zod Schema。纯浏览器本地处理,数据不上传。

免费 JSONPath 在线测试工具 | 本地实时求值

免费的 JSONPath Tester / Evaluator:粘贴 API JSON,实时提取匹配节点、查看路径并复制 JSON 结果。解析与查询都在浏览器本地完成。

JSON 转 CSV 工具 - 本地转换为表格数据

在浏览器本地将 JSON 对象或对象数组转换为 CSV,展开嵌套字段,预览结果并复制或下载文件,无需上传数据。

CSV 转 JSON 工具 - 本地实时转换器

将 CSV 文本或文件在浏览器本地实时转换为 JSON 数组,支持表头、逗号/分号/Tab 分隔、拖拽文件、复制和下载,无需上传数据。

JSON 对比工具 - 本地 Semantic Diff

在浏览器本地比较两个 JSON,按 Key 排序后做语义化 Diff,忽略字段顺序干扰,标记新增、删除和修改字段,无需上传数据。

JSON 压缩工具

把格式化 JSON 压缩为一行,移除缩进、换行和多余空白,并实时查看压缩前后体积与节省比例。

JSON 转 TypeScript 接口 - 在线生成 TS Types 代码

免费的 JSON 转 TypeScript 工具。一键将 API JSON 响应自动推导并生成强类型的 TS Interfaces 和 Types 代码。纯浏览器前端处理,严格保护您的业务数据与接口结构隐私。

计算逻辑

  • PX 转 REM 公式:REM = PX / Base Size
  • REM 转 PX 公式:PX = REM × Base Size
  • 默认情况下浏览器根字号通常为 16px,因此 16px = 1rem24px = 1.5rem

常见问题

1rem 等于多少 px?

默认浏览器设置下,1rem 通常等于 16px。但如果项目修改了 html { font-size },就应以实际根字号为准。

PX 和 REM 有什么区别?

PX 是固定像素单位;REM 相对于根元素字号,更适合响应用户字号偏好与可访问性设置。

为什么很多项目用 10px 作为根字号?

部分项目会设置 html { font-size: 62.5%; },让 1rem 约等于 10px,便于心算。但要注意用户字号设置和可访问性影响。

支持 EM 换算吗?

当前工具聚焦 PX 与 REM 的双向换算。EM 取决于当前元素自身字号,不一定等于根字号,因此暂不写入计算承诺。

这个工具会上传 CSS 或设计数据吗?

不会。换算只发生在浏览器本地,没有文件上传或服务器计算。