REM 转 PX 转换器
这个 REM 转 PX 转换器可根据根字体大小将 REM 单位转换回像素值。输入 REM 值，即时查看对应的像素大小，支持自定义基础字体大小（默认 16px）。
REM 转 PX 转换器
根据根元素字体大小在 rem 和像素（px）之间转换
常见问题
如何将REM转换为PX？
将REM转换为像素时，将REM值乘以根字体大小。公式为：PX = REM × 根字体大小。使用默认根字体大小16px，1.5rem × 16px = 24px。如果您的根字体大小不同（例如使用62.5%技术时为10px），请使用该值替换。在16px基础下的常见转换：0.5rem = 8px、0.75rem = 12px、1rem = 16px、1.5rem = 24px、2rem = 32px、3rem = 48px。
1 REM等于多少像素？
默认情况下，在大多数浏览器中，1 REM等于16像素。REM代表"根em"，相对于根元素的font-size。如果您设置html { font-size: 16px; }，则1rem = 16px，1.5rem = 24px，2rem = 32px。公式为：像素 = rem × 根字体大小。
REM转PX的公式是什么？
公式为：PX = REM × 根字体大小。使用默认根字体大小16px：PX = REM × 16。例如，2.5rem = 2.5 × 16 = 40px。如果您使用62.5%技术（html { font-size: 62.5%; }），根字体大小变为10px，所以2.5rem = 25px。
2rem等于多少像素？
在默认16px根字体大小下，2rem等于32像素（2 × 16 = 32）。如果使用62.5%技术将根字体大小设为10px，则2rem等于20px（2 × 10 = 20）。转换始终取决于根字体大小。2rem的常见用途包括标题大小（h2元素）、章节内边距和设计系统中的组件外边距。
更改根字体大小如何影响REM值？
更改根字体大小会按比例影响页面上的每个REM值。如果将根字体大小从16px更改为20px，所有基于REM的尺寸增加25%。设置为1.5rem的元素从24px增长到30px。这种级联效应既是REM单位的优势也是风险。它允许响应式设计的全局缩放，但根字体大小的更改会影响整个布局。这就是为什么一些团队使用62.5%根（10px）进行简便计算，同时将正文文本保持在1.6rem。
REM和EM有什么区别？
REM（根em）始终相对于根元素的字体大小，在整个页面上提供一致的尺寸。EM相对于元素父元素的字体大小，可能导致叠加问题。例如，如果父元素有font-size: 1.2em，子元素也有font-size: 1.2em，子元素的计算大小叠加为祖父元素的1.44em。REM避免了这种叠加，因为它始终引用根元素。使用REM进行一致的间距和字体大小；当您想要元素相对于其父元素字体大小缩放时，使用EM。
如何找到页面的根字体大小？
要找到根字体大小，打开浏览器开发者工具（F12或Ctrl+Shift+I），在元素面板中选择<html>元素，然后在"计算"选项卡中查看font-size。或者，在控制台运行以下JavaScript：getComputedStyle(document.documentElement).fontSize。无论CSS使用百分比、em还是像素，都会返回计算后的像素值。默认值为"16px"，除非被样式表覆盖。
为什么REM值在某些浏览器上渲染不同？
REM值在现代浏览器之间应该一致渲染，因为所有主流浏览器默认根字体大小为16px。差异通常发生在以下情况：用户在设置中更改了浏览器默认字体大小（一种无障碍功能）、CSS重置或框架覆盖了根字体大小，或页面通过html { font-size: ... }使用不同的基础大小。子像素渲染也可能导致细微的视觉差异，因为浏览器对分数像素值的舍入处理不同（例如0.875rem = 14px，某些浏览器可能渲染为13px或14px）。
什么是REM的62.5%技术？
62.5%技术将根字体大小设为浏览器默认值的62.5%（62.5% × 16px = 10px），使心算更容易：1rem = 10px，1.6rem = 16px，2.4rem = 24px。通过html { font-size: 62.5%; }应用，然后设置body { font-size: 1.6rem; }以恢复正常正文文本。此技术尊重用户字体大小偏好，因为它使用百分比而不是固定像素值。
如何将 REM 转换为 PX
REM 转像素的方法非常简单，公式如下：
像素值 = rem 值 × 根字体大小
根字体大小是 <html> 元素上设置的 font-size 值。在所有主流浏览器（Chrome、Firefox、Safari、Edge）中，默认根字体大小为 16px，即 1rem = 16px（除非样式表覆盖了该值）。
示例： 以默认 16px 为基础，将 2.5rem 转换为像素：
2.5rem × 16px = 40px
如果项目使用 62.5% 技术（根字体大小 = 10px）：
2.5rem × 10px = 25px
REM 转 PX 对照表
以下为常用 rem 值与其对应像素值的对照表（默认 16px 基础字体大小）：
| REM | 像素（16px 基础） |
|---|---|
| 0.25rem | 4px |
| 0.5rem | 8px |
| 0.75rem | 12px |
| 1rem | 16px |
| 1.25rem | 20px |
| 1.5rem | 24px |
| 2rem | 32px |
| 2.5rem | 40px |
| 3rem | 48px |
| 4rem | 64px |
| 5rem | 80px |
| 6rem | 96px |
| 8rem | 128px |
| 10rem | 160px |
| 12rem | 192px |
| 16rem | 256px |
| 20rem | 320px |
CSS 中的 REM 是什么？
REM 全称 Root EM（根 em），是一种相对 CSS 单位，始终以根元素（<html>）的字体大小为参考。与 em 单位不同——em 相对于父元素的字体大小——REM 为整个文档提供唯一且一致的参考点。
浏览器加载页面时，会将默认字体大小 16px 应用于 <html> 元素，页面上所有 rem 值都以此根字体大小为基准计算。例如，1.5rem 解析为 24px（1.5 × 16），2rem 解析为 32px，0.75rem 解析为 12px。
REM 的核心优势在于可缩放性。当用户为无障碍需求调整浏览器默认字体大小时，所有基于 rem 的尺寸均会等比缩放。若用户将浏览器默认字体设为 20px，原本设为 2rem 的标题将从 32px 增大到 40px，这对满足 WCAG 无障碍规范至关重要。
REM 适用于字体大小、间距（外边距、内边距）、宽度、高度，以及几乎所有接受长度值的 CSS 属性。它在绝对单位的可预测性与相对单位的灵活性之间取得了完美平衡。
REM 与 EM 的核心区别
REM 和 EM 都是相对 CSS 单位，但参考的元素不同。理解两者的区别是选择合适单位的关键。
| 特性 | REM | EM |
|---|---|---|
| 参考元素 | 根元素（<html>） | 父元素 |
| 叠加效应 | 无叠加 | 嵌套时叠加 |
| 可预测性 | 全页面一致 | 随上下文变化 |
| 适用场景 | 全局尺寸、间距、布局 | 组件内部比例缩放 |
| 示例 | 1.5rem 始终等于 24px（16px 基础） | 1.5em 取决于父元素 |
一般而言，字体大小、外边距、内边距和布局尺寸优先使用 rem；只有当你希望元素尺寸相对于父元素字体大小缩放时（例如按钮内边距随字体大小增长），才使用 em。
62.5% 技术
62.5% 技术是一种将根字体大小设为 10px 以简化 rem 计算的常见方案：
html {
font-size: 62.5%; /* 62.5% × 16px = 10px */
}
body {
font-size: 1.6rem; /* 恢复正文字体大小为 16px */
}
使用 10px 基础时，心算极为简便：1.6rem = 16px，2.4rem = 24px，1.2rem = 12px——每个 rem 值等于对应像素值除以 10。
为何使用百分比而非固定像素值？ 将根字体大小设为百分比（62.5%）而非固定像素（10px），可以保留无障碍适配能力。若用户将浏览器默认字体设为 20px，62.5% 技术计算结果为 12.5px（62.5% × 20px），所有 rem 值仍会等比缩放；而固定写 html { font-size: 10px; } 则会完全覆盖用户偏好。
使用本转换器配合 62.5% 技术时，请将基础字体大小设为 10，以获得准确的像素结果。
相关工具
- PX 转 REM 转换器 — 将像素值转换为 rem 单位（反向转换）