REM 转 PX 转换器
这个 REM 转 PX 转换器可根据根字体大小将 REM 单位转换回像素值。输入 REM 值，即时查看对应的像素大小，支持自定义基础字体大小（默认 16px）。
REM to PX Converter
Convert between rem and pixel (px) values based on the root element font size
Frequently Asked Questions
如何将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; }以恢复正常正文文本。此技术尊重用户字体大小偏好，因为它使用百分比而不是固定像素值。
How to Convert REM to PX
Converting REM to pixels is straightforward. The formula is:
pixels = rem × root font size
The root font size is the font-size value set on the <html> element. In all major browsers (Chrome, Firefox, Safari, Edge), the default root font size is 16px. This means 1rem = 16px unless your stylesheet overrides it.
Example: Convert 2.5rem to pixels with the default 16px base:
2.5rem × 16px = 40px
If your project uses the 62.5% technique (root font size = 10px):
2.5rem × 10px = 25px
REM to PX Conversion Table
Reference table for common REM values and their pixel equivalents using the default 16px base font size:
| REM | PX (16px base) | REM | PX (16px base) |
|---|---|---|---|
| 0.25rem | 4px | 4rem | 64px |
| 0.5rem | 8px | 5rem | 80px |
| 0.75rem | 12px | 6rem | 96px |
| 1rem | 16px | 8rem | 128px |
| 1.25rem | 20px | 10rem | 160px |
| 1.5rem | 24px | 12rem | 192px |
| 2rem | 32px | 16rem | 256px |
| 2.5rem | 40px | 20rem | 320px |
| 3rem | 48px |
What Is REM in CSS?
REM stands for Root EM. It is a relative CSS unit that always references the font size of the root element (<html>). Unlike the emunit, which is relative to the parent element's font size, REM provides a single, consistent reference point across your entire document.
When a browser loads a page, it applies a default font size of 16px to the <html> element. All REM values on the page are calculated relative to this root size. For example, 1.5rem resolves to 24px (1.5 × 16), 2rem resolves to 32px, and 0.75rem resolves to 12px.
The primary advantage of REM is scalability. If a user changes their browser's default font size for accessibility, all REM-based measurements scale proportionally. A heading set to 2rem will grow from 32px to 40px if the user sets their browser default to 20px. This behavior is critical for meeting WCAG accessibility guidelines.
REM is used for font sizes, spacing (margins, padding), widths, heights, and nearly any CSS property that accepts a length value. It provides the perfect balance between the predictability of absolute units and the flexibility of relative units.
REM vs EM: Key Differences
Both REM and EM are relative CSS units, but they reference different elements. Understanding the distinction is essential for choosing the right unit.
| Feature | REM | EM |
|---|---|---|
| Reference | Root element (<html>) | Parent element |
| Compounding | No compounding | Compounds with nesting |
| Predictability | Consistent across the page | Varies by context |
| Best for | Global sizing, spacing, layout | Component-scoped scaling |
| Example | 1.5rem = always 24px (16px base) | 1.5em = depends on parent |
In general, prefer REM for typography, margins, padding, and layout dimensions. Use EM only when you intentionally want an element's sizing to scale relative to its parent, such as padding inside a button that should grow with its font size.
The 62.5% Technique
The 62.5% technique is a popular approach that simplifies REM calculations by setting the root font size to 10px:
html {
font-size: 62.5%; /* 62.5% of 16px = 10px */
}
body {
font-size: 1.6rem; /* Restores body text to 16px */
}With a 10px base, the mental math becomes trivial: 1.6rem = 16px, 2.4rem = 24px, 1.2rem = 12px. Every REM value is simply the pixel value divided by 10.
Why use a percentage? Setting the root font size as a percentage (62.5%) rather than a fixed pixel value (10px) preserves accessibility. If a user has set their browser default to 20px, the 62.5% technique calculates to 12.5px (62.5% of 20px), and all REM values scale proportionally. A fixed html { font-size: 10px; }would override the user's preference entirely.
When using the 62.5% technique with this converter, set the base font size to 10 to see accurate pixel values.
Related Tools
- PX to REM Converter — Convert pixel values to REM units (reverse conversion)