🔢 px/rem 转换器

像素和rem单位轻松互转

像素 (px)

⇄

Rem

rem

⚙️ 配置选项

根字号 (Root Font Size)

rem

16px ÷ 16 = 1rem

📊 常用尺寸对照表

px	rem (16px基准)	em (16px基准)

什么是 PX 转 REM 转换器？

PX 转 REM 转换器是一款帮助前端开发者在像素值（px）和相对单位（rem/em）之间进行快速换算的在线工具。在响应式 Web 设计中，使用 rem（root em）单位而非固定像素值已成为行业最佳实践。rem 相对于根元素（html）的字体大小，默认情况下 1rem = 16px。当用户调整浏览器字体大小或使用系统缩放时，rem 值会自动适配，确保页面布局的弹性和可访问性。本工具支持实时双向转换、自定义基准字体大小、批量转换等功能，同时提供 CSS 变量方案代码和常用换算对照表，帮助开发者快速建立 rem 思维模式。

如何使用 PX 转 REM 转换器

步骤一：输入像素值 — 在像素输入框中输入需要转换的 px 数值，如 24。工具默认基准为 1rem = 16px，立即显示转换结果 1.5rem。
步骤二：调整基准值（可选） — 如果你的项目使用自定义的根字体大小（如在 CSS 中设置 html { font-size: 62.5% } 使 1rem = 10px），可以修改基准值以获得准确的换算结果。
步骤三：查看对照表或批量转换 — 工具提供常用像素值与 rem 的对照表，也支持批量输入多个值进行一次性转换。结果可直接复制到 CSS 文件中使用。

常见使用场景

场景一：将设计稿的 px 值转换为 rem

UI 设计师提供的设计稿以像素标注（如 Figma），但前端开发需要使用 rem 单位实现响应式布局。使用此工具快速将设计稿中的 14px 字号、24px 间距等值转换为 rem，确保页面在不同设备上按比例缩放。

场景二：建立项目的排版规范

在项目的 CSS 架构设计阶段，使用此工具建立字号阶梯（type scale）和间距系统（spacing system）。例如定义基础字号 1rem（正文）、1.25rem（小标题）、1.5rem（标题）等，确保整个项目的排版节奏一致。

场景三：无障碍适配和可访问性优化

使用 rem 单位可以尊重用户的浏览器字体大小设置。视力障碍用户可能将浏览器默认字号调大至 20px 或 24px，使用 rem 单位的页面会自动放大所有相关尺寸，而 px 单位则不会响应这种设置。

技术原理

rem（root em）是 CSS3 引入的相对单位，始终相对于根元素（<html>）的 font-size 计算。浏览器默认 html { font-size: 16px }，因此 1rem = 16px。常见技巧是在 CSS 中设置 html { font-size: 62.5% }，使 1rem = 10px，简化心算。em 单位则相对于父元素的字体大小，嵌套使用时会产生累积效果。CSS calc() 函数可以混合使用不同单位：

/* 62.5% 技巧：1rem = 10px */
html { font-size: 62.5%; /* 16px × 62.5% = 10px */ }

/* 常用转换示例 */
h1 { font-size: 2.4rem; }     /* 24px */
p { font-size: 1.6rem; }      /* 16px */
.container { padding: 2rem; }  /* 20px */
.btn { margin: 0.8rem 1.6rem; } /* 8px 16px */

/* calc() 混合使用 */
.header { height: calc(4rem + 20px); }