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,方便把设计稿间距映射到实用类。
  • 纯本地极速计算:所有换算都在浏览器内存中完成,不依赖网络请求。

相关工具

财富自由计算器 2026 (剔除通胀版) - 养老金与复利模拟器

2026 最新 FIRE 财务自由计算器(剔除通胀版)。拒绝虚高数字,精准模拟实际购买力下的复利增长。支持 4% 法则验证与养老金缺口反向推算。支持一键导出 CSV,完美适配 Excel 或 Notion 财务看板。隐私优先,本地计算零上传。

仓位计算器 - 按风险比例规划交易仓位

根据账户资金、风险比例、入场价和止损价计算交易仓位。所有计算在浏览器本地完成,不上传账户数据,可对比多档风险方案。

复利计算器 | 免费定投收益与 APY 增长图表

输入本金、定期投入、年化收益率和投资年限,计算复利增长结果,并用交互式图表展示本金、利息和最终总额。数据仅在本地计算。

在线房贷/贷款计算器 - 实时图表与还款明细 (等额本息/本金)

使用 Loan Calculator / Mortgage Calculator 在浏览器本地计算月供、总利息与还款明细。输入贷款额、年利率和期限,立即查看图表与还款计划表。

在线投资与 ROI 计算器 - 定投/复利收益可视化

使用 Investment Calculator / ROI Calculator 在浏览器本地估算初始本金、每月定投、年化回报率和通胀后的投资结果。立即查看复利图表、本金/收益拆解、ROI 与年度明细。

APR 与 APY 换算计算器 - 名义利率与实际利率转换

使用 APR to APY Calculator 在浏览器本地完成 APR/APY 双向换算。输入利率并选择复利频率,立即查看有效年利率、差值和多频率对比表。

利润率计算器 - 毛利率、加价率与售价在线换算

使用这款利润率计算器在浏览器本地计算毛利、Margin 和 Markup。输入成本和售价,或输入成本与目标毛利率,立即推算售价并避免把加价率误当利润率。

CPM 与 CPC 计算器 - 广告投放 CTR 与成本在线测算

使用 CPM 与 CPC 计算器在浏览器本地测算广告花费、展示量、点击量、CPM、CPC 和 CTR。输入预算与目标成本,快速推演可获得的曝光或点击。

计算逻辑

  • 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 或设计数据吗?

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