像素到REM到EM转换器 – 免费CSS单位计算器

Q: 什么是 REM 单位？

REM（根 em）单位基于根元素的字体大小进行缩放——通常是 元素。大多数浏览器默认为 16px，因此 1rem 等于 16px，除非你更改根字体大小。以下是 REM 的强大之处：它们在整个站点提供一致、可预测的缩放。 开发者喜欢 REM 单位的原因： 一致的缩放：更改根字体大小，所有内容按比例缩放 无障碍合规：当用户调整浏览器字体大小时，基于 REM 的布局会自动适应 更易维护：在一个地方更新间距值，而不是在像素值中搜索 没有复合问题：与 EM 单位不同，REM 不会在嵌套元素中复合 经验之谈：将根字体大小设置为 62.5%（使 1rem = 10px，基于默认的 16px）。这使得心算更容易——1.6rem = 16px，2.4rem = 24px。记得将 body 字体大小设回 1.6rem，使文本默认为 16px。根据 W3C CSS 值和单位规范，REM 单位始终引用根元素，使其在复杂布局中具有可预测性。

Q: REM和EM单位有什么区别？

参考点完全不同。REM单位始终查看根 元素的字体大小——无论元素嵌套多深，1rem都等于相同的计算值。EM单位查看其直接父元素的字体大小，这会产生级联效果。 可以这样理解：如果嵌套三个 元素，每个元素的font-size: 1.2em，最内层div的文本会比预期大得多，因为每一级都会复合乘法。而使用font-size: 1.2rem时，所有三个div的字体大小都相同，因为它们都引用根元素。 这就是为什么REM在浏览器支持改善后变得流行于排版——它消除了跟踪继承链的心理负担。

Q: 对于响应式网页设计，哪种CSS单位最好？

没有单一单位在所有情况下都是最佳的。最好的响应式设计策略性地组合单位： 使用REM的场景：全局间距、排版比例、组件间距，以及任何应该随用户字体偏好缩放的测量 使用EM的场景：组件内部间距（按钮内边距、卡片间距）、媒体查询（尊重用户偏好）、应该在本地上下文中缩放的元素 使用像素的场景：1px边框（看起来清晰）、盒子阴影（微妙的阴影需要精确度）、SVG描边宽度 使用百分比或视口单位的场景：容器宽度、全高度区域 我见过试图在所有地方使用单一单位的代码库——这总是会造成维护麻烦。在每个单位最有利的地方使用它。 [翻译将继续...]

PX、REM 和 EM 单位转换器：解释 CSS 基本单位

为什么 CSS 单位转换对现代 Web 开发很重要

当你构建响应式网站时，最常见的挑战之一是将设计规范转换为灵活、可扩展的 CSS。你可能在 Figma 设计中看到过"padding: 24px"，并且想知道是保留像素还是转换为 rem 单位。这个决定会影响从可访问性到用户调整浏览器字体大小时布局的响应方式等各个方面。

这个 PX、REM 和 EM 单位转换器可以帮助你快速在这三种基本 CSS 单位之间进行转换。像素可以提供精确的控制——非常适合边框和细节。REM 单位根据根字体大小进行缩放，使其非常适合在整个网站上保持一致的间距和排版。EM 单位相对于其父元素进行缩放，非常适合创建保持比例的自包含组件。

棘手的部分在于转换时需要考虑字体大小，这在根元素和各个组件之间会有所不同。我看到开发者常犯的一个错误是到处使用像素，因为看起来更简单。虽然这最初可以工作，但当用户增加浏览器的默认字体大小时会造成可访问性问题——布局无法按比例适配。

理解 CSS 单位：PX、REM 和 EM

什么是像素（PX）？

像素（PX）是最直接的 CSS 单位——你指定的就是你得到的。CSS 像素是一个参考单位，不一定是物理屏幕像素（尤其是在 Retina 屏幕等高 DPI 显示器上）。它们提供固定大小，不会根据字体大小或父元素而改变。

1.element {
2  width: 200px;
3  font-size: 16px;
4  margin: 10px;
5}
6

像素适用的场景：

边框和分隔线（1px 或 2px 边框保持清晰）
不需要缩放的小而精确的细节
需要精确尺寸的固定宽度容器
使用像素完美精灵图时的图标大小

缺点：像素不尊重用户偏好。如果有人将浏览器默认字体大小从 16px 增加到 20px 以提高可读性，基于像素的布局将保持不变，可能导致文本溢出容器或创建拥挤的间距。

什么是 REM 单位？

REM（根 em）单位基于根元素的字体大小进行缩放——通常是 <html> 元素。大多数浏览器默认为 16px，因此 1rem 等于 16px，除非你更改根字体大小。以下是 REM 的强大之处：它们在整个站点提供一致、可预测的缩放。

1html {
2  font-size: 16px; /* 大多数浏览器的默认值 */
3}
4
5.element {
6  width: 12.5rem; /* 使用默认根字体大小时等于 200px */
7  font-size: 1rem; /* 等于 16px */
8  margin: 0.625rem; /* 等于 10px */
9}
10

开发者喜欢 REM 单位的原因：

一致的缩放：更改根字体大小，所有内容按比例缩放
无障碍合规：当用户调整浏览器字体大小时，基于 REM 的布局会自动适应
更易维护：在一个地方更新间距值，而不是在像素值中搜索
没有复合问题：与 EM 单位不同，REM 不会在嵌套元素中复合

经验之谈：将根字体大小设置为 62.5%（使 1rem = 10px，基于默认的 16px）。这使得心算更容易——1.6rem = 16px，2.4rem = 24px。记得将 body 字体大小设回 1.6rem，使文本默认为 16px。根据 W3C CSS 值和单位规范，REM 单位始终引用根元素，使其在复杂布局中具有可预测性。

什么是 EM 单位？

EM 单位相对于其父元素的字体大小进行缩放，使其具有上下文感知性。这种行为与始终引用根元素的 REM 单位不同。"em"这个名称来源于排版——历史上它指的是给定字体中大写字母"M"的宽度。

1.parent {
2  font-size: 20px;
3}
4
5.child {
6  font-size: 0.8em; /* 等于 16px（20px × 0.8） */
7  margin: 0.5em; /* 等于 8px（16px × 0.5） */
8}
9

EM 单位的优势：

基于组件的设计：与字体大小成比例的内边距和外边距
排版：行高与无单位值或 em 值配合良好（如 line-height: 1.5em）
自包含模块：当字体大小变化时保持比例的按钮或卡片
媒体查询：根据 MDN Web 文档，媒体查询中的 EM 单位引用浏览器的默认字体大小，而不是父元素

复合陷阱：这是开发者经常遇到的困境。EM 单位通过嵌套元素级联，可能会产生意外结果：

1.level-1 { font-size: 1.2em; }  /* 如果父元素是 16px，则为 19.2px */
2.level-2 { font-size: 1.2em; }  /* 23.04px（19.2px × 1.2） */
3.level-3 { font-size: 1.2em; }  /* 27.65px（23.04px × 1.2） */
4

经过三级嵌套，文本增长了 73%，而不是预期的 20%。这就是为什么许多开发者在浏览器支持改善后转向 REM 单位进行排版。

转换公式和计算

理解像素（PX）、REM 和 EM 单位之间的数学关系对于准确转换至关重要。以下是我们转换器中使用的公式：

PX 转 REM 转换

要将像素转换为 REM 单位，请将像素值除以根字体大小：

$REM = \frac{PX}{rootFontSize}$

例如，使用默认根字体大小 16px：

16px = 1rem
24px = 1.5rem
8px = 0.5rem

PX 转 EM 转换

要将像素转换为 EM 单位，请将像素值除以父元素的字体大小：

$EM = \frac{PX}{parentFontSize}$

例如，父元素字体大小为 16px：

16px = 1em
24px = 1.5em
8px = 0.5em

REM 转 PX 转换

要将 REM 单位转换为像素，请将 REM 值乘以根字体大小：

$PX = REM \times rootFontSize$

例如，使用默认根字体大小 16px：

1rem = 16px
1.5rem = 24px
0.5rem = 8px

EM 转 PX 转换

要将 EM 单位转换为像素，请将 EM 值乘以父元素的字体大小：

$PX = EM \times parentFontSize$

例如，父元素字体大小为 16px：

1em = 16px
1.5em = 24px
0.5em = 8px

REM 转 EM 转换

要将 REM 单位转换为 EM 单位，需要考虑根字体大小和父元素的字体大小：

$EM = REM \times \frac{rootFontSize}{parentFontSize}$

如果根字体大小和父元素字体大小相同（例如 16px），则 1rem = 1em。

EM 转 REM 转换

要将 EM 单位转换为 REM 单位，请使用以下公式：

$REM = EM \times \frac{parentFontSize}{rootFontSize}$

同样，如果两个字体大小相等，则 1em = 1rem。

如何使用像素到REM到EM单位转换器

使用此工具进行准确的转换非常直接。关键是了解要为特定情况使用哪些字体大小。

快速入门指南

输入您的值在任何字段中——像素、REM或EM
立即检查结果在其他两个单位中
调整字体大小以匹配您的项目：
- 根字体大小：您在<html>元素上设置的大小（通常是16px）
- 父元素字体大小：特定元素父元素的字体大小（也通常是16px）
使用复制按钮复制您需要的值

为您的项目获取准确结果

转换器默认为根和父字体大小都是16px，因为这是浏览器标准。但重要的是：您的实际项目可能使用不同的值。

查找根字体大小：打开浏览器的开发者工具，检查<html>元素，并查看计算后的字体大小。如果您设置了html { font-size: 62.5%; }，则根字体大小为10px（16px的62.5%）。

查找父元素字体大小：对于EM转换，您需要应用样式的特定父元素的字体大小。在开发者工具中检查该元素，查看其计算后的字体大小。如果父元素有font-size: 1.2rem，并且您的根字体大小为16px，则将父元素字体大小设置为19.2px以进行准确的EM计算。

常见转换场景

从设计到代码：您的Figma文件显示padding: 24px。您想使用REM单位以提高可访问性。在PX字段中输入24，您将看到它等于1.5rem（假设根字体大小为16px）。

构建按钮组件：您希望内边距随按钮的字体大小缩放。如果按钮有font-size: 1.125rem（18px），设置父元素字体大小为18，输入您想要的像素内边距，并使用得到的EM值。

响应式排版：您正在创建一个桌面端32px的标题。输入32px，可以看到它是2rem，当用户调整浏览器字体大小时，它将适当缩放。

真实世界的 CSS 单位转换使用场景

了解公式是一回事，在生产代码中有效应用又是另一回事。这就是单位转换能在你的项目中产生切实差异的地方。

将设计文件转换为响应式 CSS

你收到一个 Figma 设计，所有内容都以像素指定。卡片组件显示：

内边距：24px
标题字体大小：28px
正文字体大小：16px
底部外边距：40px

将这些转换为 REM 单位（假设根元素为 16px）：

1.card {
2  padding: 1.5rem;        /* 24px → 1.5rem */
3  margin-bottom: 2.5rem;  /* 40px → 2.5rem */
4}
5
6.card__heading {
7  font-size: 1.75rem;     /* 28px → 1.75rem */
8}
9
10.card__body {
11  font-size: 1rem;        /* 16px → 1rem */
12}
13

好处是什么？当视力受损的用户将浏览器默认字体大小从 16px 增加到 20px 时，你的卡片按比例缩放。内边距、外边距和文字都会增大 25%，保持设计的视觉平衡。如果使用像素值，只有文字会变大，从而破坏布局。

构建无障碍组件库

组件库需要在任何尺寸下都能正常工作——小、中、大。对于内边距使用 EM 单位可以创建自包含的缩放：

1.button {
2  /* 基础按钮，字体大小为 16px */
3  font-size: 1rem;
4  padding: 0.75em 1.5em;  /* 基础尺寸下为 12px 24px */
5  border: 1px solid currentColor;
6  border-radius: 0.25em;
7}
8
9.button--large {
10  font-size: 1.25rem;  /* 20px */
11  /* 内边距自动变为 15px 30px（0.75em × 20px） */
12}
13
14.button--small {
15  font-size: 0.875rem;  /* 14px */
16  /* 内边距自动变为 10.5px 21px（0.75em × 14px） */
17}
18

内边距会自动缩放，因为它是相对于按钮字体大小定义的 EM 单位。你只需定义一次比例，就能在所有尺寸变体中使用。这种方法，在现代 CSS 架构模式中推荐，可以减少代码并保持视觉一致性。

建立排版的模块化比例

排版系统在一致的比例下效果最佳。使用 REM 单位可以轻松实现：

1/* 基于 1.25 比例的模块化比例（大三度） */
2:root {
3  --text-xs: 0.64rem;    /* 10.24px */
4  --text-sm: 0.8rem;     /* 12.8px */
5  --text-base: 1rem;     /* 16px */
6  --text-lg: 1.25rem;    /* 20px */
7  --text-xl: 1.563rem;   /* 25px */
8  --text-2xl: 1.953rem;  /* 31.25px */
9  --text-3xl: 2.441rem;  /* 39px */
10  --text-4xl: 3.052rem;  /* 48.8px */
11}
12
13h1 { font-size: var(--text-4xl); }
14h2 { font-size: var(--text-3xl); }
15h3 { font-size: var(--text-2xl); }
16h4 { font-size: var(--text-xl); }
17p { font-size: var(--text-base); }
18

这种方法，在 CSS 自定义属性文档中有详细说明，集中管理你的比例。当用户更改字体大小偏好时，整个层次按比例缩放，保持视觉关系。

专业提示：使用转换器创建你的比例，但要四舍五入到合理的值。1.5625rem 在代码中看起来很精确，但 1.563rem 足够接近且更易阅读。

将设计文件转换为生产代码

像 Figma、Sketch 和 Adobe XD 这样的设计工具仅使用像素。你的设计系统应该使用相对单位。这个转换器可以弥合这个差距。

我发现有效的工作流程：

提取设计中所有唯一的像素值（间距、字体大小、宽度）
使用此工具转换最常见的值为 REM
创建 CSS 自定义属性这些值
将设计标记映射到你的 CSS 变量

例如，如果你的设计在整个过程中使用 8px、16px、24px、32px 和 48px 间距，一次性转换：

1:root {
2  --space-1: 0.5rem;    /* 8px */
3  --space-2: 1rem;      /* 16px */
4  --space-3: 1.5rem;    /* 24px */
5  --space-4: 2rem;      /* 32px */
6  --space-6: 3rem;      /* 48px */
7}
8

现在当设计显示"32px 外边距"时，你可以编写 margin: var(--space-4)。设计在默认缩放时保持像素完美，同时在任何字体大小下都保持可访问性。

超越 PX、REM 和 EM：值得了解的其他 CSS 单位

虽然这个转换器专注于三个最常见的单位，但 CSS 为特定场景提供了其他选项：

视口单位（vw、vh、vmin、vmax）：这些根据浏览器窗口大小缩放。1vw = 视口宽度的 1%，1vh = 视口高度的 1%。非常适合应该始终填满屏幕的主页部分，但要小心——它们不遵守用户字体大小偏好，可能会为文本内容造成可访问性问题。

百分比（%）：相对于父元素的尺寸。仍广泛用于布局宽度（width: 50%）和响应式容器。与 REM/EM 不同，宽度/高度的百分比引用尺寸，而非字体大小。

CH 单位：基于当前字体中"0"字符的宽度。对于创建最佳行长度的文本容器很有用——max-width: 60ch 创建大约 60 个字符宽的行，阅读起来很舒适。

clamp()、min()、max() ：这些 CSS 函数可以动态组合不同的单位。font-size: clamp(1rem, 2.5vw, 2rem) 创建随视口大小缩放但保持在边界内的流体排版。根据 MDN 上的现代 CSS 技术，这种方法正在获得关注。

CSS 单位的演变：从固定到灵活

从像素到相对单位的转变反映了网页从静态文档到响应式应用的发展历程。了解这段历史可以解释我们今天为什么要在单位之间进行转换。

像素完美时代（1990年代-2000年代）

早期网站是为特定屏幕宽度设计的——640像素，然后是800像素，接着是1024像素。CSS布局完全使用像素，因为这是印刷设计师所理解的。网站在浏览器间看起来完全相同（当它们能正常工作时），但在意外的屏幕尺寸上完全崩溃。网页被当作印刷品对待：固定的、可控的、可预测的。

EM单位在CSS规范中已经存在，继承自排版，但大多数开发者都避免使用它们。复合行为令人困惑，而且当时还没有移动设备迫使我们思考更灵活的方案。

移动设备唤醒号角（2007-2010）

iPhone改变了一切。突然间，大量流量来自320像素宽的屏幕。捏合缩放有所帮助，但为1024像素桌面设计的网站在移动设备上极其难用。

伊桑·马科特2010年关于响应式网页设计的文章crystallized了一种新方法：流体网格、灵活图像和媒体查询。相对单位变得至关重要，而不再是可选的。但EM单位在复杂布局中的级联行为导致了bug。

REM单位拯救世界（2010-至今）

CSS3大约在2010年引入了REM单位，解决了EM最大的问题：复合。REM为我们提供了相对缩放，同时避免了继承的复杂性。Internet Explorer 9在2011年添加了支持，到2015年，REM单位已经成为主流。

如今，最佳实践是策略性地组合单位。REM用于排版和间距。EM用于组件内部比例。像素用于精细细节。现代CSS函数如clamp()可以动态混合这些单位，创建可以适应任何上下文的布局。

这种演变——从刚性像素到灵活的相对单位——反映了用户期望从"网站应该在任何地方看起来都一样"转变为"网站应该在任何地方都能良好工作"。

单位转换代码示例

JavaScript 单位转换函数

1// 在 PX、REM 和 EM 单位之间转换
2const pxToRem = (px, rootFontSize = 16) => {
3  return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7  return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11  return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15  return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19  return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23  return em * (parentFontSize / rootFontSize);
24};
25
26// 使用示例
27console.log(pxToRem(24));  // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
31

CSS 自定义属性单位转换

1:root {
2  /* 基础字体大小 */
3  --root-font-size: 16px;
4  --base-font-size: var(--root-font-size);
5  
6  /* 常用像素值转换为 REM */
7  --space-4px: 0.25rem;
8  --space-8px: 0.5rem;
9  --space-16px: 1rem;
10  --space-24px: 1.5rem;
11  --space-32px: 2rem;
12  --space-48px: 3rem;
13  
14  /* 排版比例 */
15  --text-xs: 0.75rem;    /* 12px */
16  --text-sm: 0.875rem;   /* 14px */
17  --text-base: 1rem;     /* 16px */
18  --text-lg: 1.125rem;   /* 18px */
19  --text-xl: 1.25rem;    /* 20px */
20  --text-2xl: 1.5rem;    /* 24px */
21}
22
23/* 使用示例 */
24.card {
25  padding: var(--space-16px);
26  margin-bottom: var(--space-24px);
27  font-size: var(--text-base);
28}
29
30.card-title {
31  font-size: var(--text-xl);
32  margin-bottom: var(--space-8px);
33}
34

SCSS 混合器单位转换

1// SCSS 单位转换函数
2@function px-to-rem($px, $root-font-size: 16) {
3  @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7  @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11  @return $rem * $root-font-size * 1px;
12}
13
14// 使用示例
15.element {
16  padding: px-to-rem(20);
17  margin: px-to-rem(32);
18  font-size: px-to-rem(18);
19  
20  .nested {
21    // 使用父元素字体大小（18px）进行 em 转换
22    padding: px-to-em(16, 18);
23    margin-bottom: px-to-em(24, 18);
24  }
25}
26

Python 单位转换器

1def px_to_rem(px, root_font_size=16):
2    """将像素转换为 REM 单位"""
3    return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6    """将 REM 单位转换为像素"""
7    return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10    """将像素转换为 EM 单位"""
11    return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14    """将 EM 单位转换为像素"""
15    return em * parent_font_size
16
17# 使用示例
18print(f"16px = {px_to_rem(16)}rem")  # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px")    # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em")  # 24px = 1.5em
21

CSS 单位转换常见错误

在审查了数百个代码库后，我注意到这些错误反复出现。避免它们可以节省您的调试时间。

错误 1：未考虑自定义根字体大小

问题：您将 24px 转换为 1.5rem，假设默认的 16px 根字体大小，但您的项目使用 html { font-size: 62.5%; }，这使得根字体为 10px。您的元素最终变成 15px 而不是 24px。

解决方案：在转换之前，始终检查项目的实际根字体大小。将转换器的根字体大小设置为与项目的实际情况匹配。

错误 2：在嵌套组件中对排版使用 EM 单位

问题：您为标题构建了一个卡片组件，使用 font-size: 1.2em。效果很好。然后将一个卡片嵌套在另一个卡片中，突然内部卡片的标题变成 1.44em（1.2 × 1.2），而不是 1.2em。

解决方案：除非特别需要级联行为，否则对排版使用 REM 单位。保留 EM 单位用于应该随本地字体大小缩放的间距。

错误 3：将边框宽度转换为 REM

问题：为了保持一致性，您将 border: 1px 转换为 border: 0.0625rem。当用户缩放或更改字体大小时，您的边框变得粗糙且难看。

解决方案：保持边框为像素。亚像素边框（0.5px）在浏览器中支持不一致，边框很少需要随文本缩放。

错误 4：忘记媒体查询单位参考用户偏好

问题：您为平板电脑断点编写 @media (min-width: 768px)。设置更大默认字体大小的用户无法获得应有的平板电脑布局。

解决方案：在媒体查询中使用 EM 或 REM 单位：@media (min-width: 48em)。这尊重用户的字体偏好，正如 MDN 响应式设计文档建议的那样。

错误 5：混合计算方法

问题：您的 Sass 使用一种计算方法，JavaScript 使用另一种，而您的心算使用第三种。结果不匹配，导致像素调整的挫折感。

解决方案：使用此转换器作为唯一真相来源。将其加入书签，在代码审查期间引用，并确保团队中的每个人都使用相同的转换方法。

常见问题

REM和EM单位有什么区别？

参考点完全不同。REM单位始终查看根<html>元素的字体大小——无论元素嵌套多深，1rem都等于相同的计算值。EM单位查看其直接父元素的字体大小，这会产生级联效果。

可以这样理解：如果嵌套三个<div>元素，每个元素的font-size: 1.2em，最内层div的文本会比预期大得多，因为每一级都会复合乘法。而使用font-size: 1.2rem时，所有三个div的字体大小都相同，因为它们都引用根元素。

这就是为什么REM在浏览器支持改善后变得流行于排版——它消除了跟踪继承链的心理负担。

对于响应式网页设计，哪种CSS单位最好？

没有单一单位在所有情况下都是最佳的。最好的响应式设计策略性地组合单位：

使用REM的场景：全局间距、排版比例、组件间距，以及任何应该随用户字体偏好缩放的测量

使用EM的场景：组件内部间距（按钮内边距、卡片间距）、媒体查询（尊重用户偏好）、应该在本地上下文中缩放的元素

使用像素的场景：1px边框（看起来清晰）、盒子阴影（微妙的阴影需要精确度）、SVG描边宽度

使用百分比或视口单位的场景：容器宽度、全高度区域

我见过试图在所有地方使用单一单位的代码库——这总是会造成维护麻烦。在每个单位最有利的地方使用它。

[翻译将继续...]

参考文献和延伸阅读

"CSS 值和单位模块第 3 级。" W3C 推荐标准。https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "响应式网页设计。" A List Apart，2010年5月25日。https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "网页排版风格要素。" http://webtypography.net/
"CSS 单位。" MDN Web 文档。https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS 像素与物理像素。" Stack Overflow 文档。https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Coyier, Chris. "CSS 的长度。" CSS-Tricks。https://css-tricks.com/the-lengths-of-css/
"使用 CSS 自定义属性（变量）。" MDN Web 文档。https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"理解和使用 CSS 中的 rem 单位。" SitePoint。https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

准确转换 CSS 单位

手动 CSS 单位转换既繁琐又容易出错。你需要进行心算，反复确认计算，并希望字体大小设置正确。这个 PX 到 REM 到 EM 转换器消除了这些障碍。

从设计文件输入像素值，调整字体大小以匹配项目配置，并立即获得准确的 REM 和 EM 值。直接将它们复制到代码中。无论你是在实施新的设计系统、用相对单位改造现有代码库，还是仅仅想了解这些单位之间的关系，转换器都会处理数学计算，让你专注于构建。

对于致力于无障碍兼容网站的开发者，这个工具有助于确保当用户调整字体偏好时，布局能正确缩放——这是 WCAG 2.1 二级 AA 标准的要求。对于构建组件库的人来说，它阐明了哪些 EM 值能创建你想要的比例。对于任何将 Figma 设计转换为生产 CSS 的人，它显著加快了转换工作流程。

这些公式基于 W3C CSS 值和单位模块规范，确保转换与浏览器实际计算这些值的方式相匹配。