📏 PX 与 REM 单位在线换算工具

专为前端开发、UI设计师和产品经理打造的 像素(px)与 rem 单位转换计算器,支持 px → rem 和 rem → px 双向换算,自动计算,精准高效,适配响应式布局开发需求。

🔍 工具功能介绍

✅ 支持双向换算

PX 转 REM:输入字体大小 px,自动计算对应 rem 数值

REM 转 PX:输入 rem 数值,结合根字体设置,换算出具体像素值

🧠 自动依据根字体大小计算

可自定义设置根元素字体大小(如 16px、14px)

快速换算 font-size: 18px = 1.125rem 等常用 CSS 样式

💻 适用场景

🎨 前端工程师在布局网页时需要将固定像素单位转换为相对单位,提升页面响应式表现

📱 H5 页面、移动端 App 开发中,rem 单位更适用于不同设备适配

📐 UI 设计人员需根据设计稿中给出的 px 尺寸,换算为 CSS rem 代码值

✍ 产品经理可根据实际需求换算 UI 标准规范中的字体大小

📘 rem 与 px 的区别和选择建议

📐 PX(像素):

是一种相对显示屏分辨率的单位

用于静态布局或仅针对单一设备优化

📐 REM(Root Em):

相对于根元素(html)字体大小的单位

更适合响应式布局、多设备兼容的项目

🧭 选择建议:

适配范围小:使用 px 即可,如仅适配部分 Android 机型

适配多种设备:建议使用 rem,例如同时兼容 iPhone、iPad、安卓等

📚 相关单位知识补充

单位

描述

px

像素单位,常用于精确控制元素大小

em

相对于当前元素字体大小

rem

相对于 html 根元素字体大小

%

相对百分比,常用于宽高设置

pt

打印行业常用单位,1pt = 1/72 英寸

🌐 如果你正在寻找这些功能,这个工具正适合你:

px 和 rem 单位自动换算

适配不同屏幕、设备下的响应式字体

快速核算设计图尺寸与实际页面布局

前端 CSS 开发中常见单位换算辅助工具

附:

像素(Pixels)、EMs、百分比(Percent)和像素点(Points)的对应关系

其中,根字体大小为16px

Pixels

EMs

Percent

Points

6px

0.375em

37.5%

5pt

7px

0.438em

43.8%

5pt

8px

0.500em

50.0%

6pt

9px

0.563em

56.3%

7pt

10px

0.625em

62.5%

8pt

11px

0.688em

68.8%

8pt

12px

0.750em

75.0%

9pt

13px

0.813em

81.3%

10pt

14px

0.875em

87.5%

11pt

15px

0.938em

93.8%

11pt

16px

根字体大小

1.000em

100.0%

12pt

17px

1.063em

106.3%

13pt

18px

1.125em

112.5%

14pt

19px

1.188em

118.8%

14pt

20px

1.250em

125.0%

15pt

21px

1.313em

131.3%

16pt

22px

1.375em

137.5%

17pt

23px

1.438em

143.8%

17pt

24px

1.500em

150.0%

18pt

25px

1.563em

156.3%

19pt

26px

1.625em

162.5%

20pt

27px

1.688em

168.8%

20pt

28px

1.750em

175.0%

21pt