双向联动
在任一输入框中输入，另一个会随每次按键同步更新。修改根字号后结果会重新计算，已输入的内容不会丢失；粘贴带单位的 24px 或 1.5rem，数值会自动进入正确的输入框。
CSS 单位工具 · 免费
PX 转 REM 转换器
按项目使用的根字号把像素转换为 rem、把 rem 转换为像素，算出嵌套元素的 em，还能粘贴一次就转换样式表中的所有 px 值，边框、媒体查询和注释保持不变。
在你的浏览器中计算 · 不上传任何内容
报告问题根字号为 16px 时，24px 等于 1.5rem；在 16px 的父元素中等于 1.5em。
设置
根字号
页面上的每次换算都会除以或乘以这个值。
选择 10 即可使用 62.5% 技巧，此时 1rem = 10px。
在 CSS 中设置
html { font-size: 100%; }100% 是浏览器默认值，所以 16px 根字号根本不需要写任何规则。
此浏览器的默认值
–
页面加载完成后读取。本站不修改 html 的字号，因此显示的是你的浏览器设置。
小数位数
末尾的零会被去掉，所以 1.5000 写作 1.5。
转换器
像素与 rem 联动
在任一输入框中输入，另一个会随之更新。rem 参照根字号。
16px 根字号下的结果
1.5rem
保留 4 位小数时为精确值，末尾的零已去掉。
24px ÷ 16px（根字号）= 1.5rem
像素 · 绝对单位
24px
Rem · 根字号 16px
1.5rem
Em · 父元素 16px
1.5em
em 会叠加
嵌套的 em 字号最终是多少
每个以 em 为单位的 font-size 都会乘以上一级的字号。从根字号开始逐级列出字号，查看每一级最终的尺寸，旁边是不会叠加的 rem 值。
- 根（html）所有 rem 的参照起点16px1rem
- 20px · 1.25rem
- 17.5px · 1.0938rem
2 / 8 级
16px × 1.25 × 0.875 = 17.5px。用 rem 写就是 1.0938rem，即使祖先元素的字号改变，它的大小也保持不变。
对照表
16px 根字号下的常用尺寸
选择一行即可复制它的 rem 值。Tailwind 列是得到相同 rem 值的间距刻度。
Tailwind 的间距刻度以 0.25rem 为一档，所以刻度 4（p-4、m-4、gap-4）等于 1rem：默认根字号下为 16px。表中只列出整数档和半档；更细的值需要使用任意值，例如 p-[0.9375rem]。Tailwind v3 的默认刻度也跳过了一些档位（没有 13），请核对你自己的配置。1px 这一行显示 px，因为 Tailwind 的 *-px 工具类在任何根字号下都恰好是 1px。
批量转换器
转换整个样式表
粘贴 CSS，所有 px 值都会按 16px 根字号转换为 rem，并舍入到 4 位小数。每处更改都会高亮显示并按行列出。
字符串和 url() 始终不变文件名或 content 字符串中的 16px 是文本，因此永远不会被改动。
转换后的 CSS已转换 +13 个 · 4 个保持原样
/* Card component, sized in px. Notes such as 24px stay put. */
:root {
--radius: 0.75rem;
--gutter: 1.25rem;
}
.card {
padding: 1.5rem 2rem;
margin: 0 auto -0.5rem;
border: 1px solid #e3e6ea;
border-radius: var(--radius);
font: 0.9375rem/1.6 system-ui, sans-serif;
box-shadow: 0 0.0313rem 0.125rem rgb(0 0 0 / 0.08);
background: #fff url("img/grain-64px.png");
}
.card__title {
font-size: 1.375rem;
letter-spacing: -0.0313rem;
margin-bottom: 0.75rem;
}
.spec-label::after {
content: "16px";
}
@media (min-width: 768px) {
.card {
padding: 2rem 3rem;
}
}
已更改
已转换
13
已舍入
2
保持原样
1px 值
1
媒体查询
1
注释
1
字符串、url()
1
每一处更改，逐行列出13 处更改
- 第 3 行12px → 0.75rem
- 第 4 行20px → 1.25rem
- 第 8 行24px → 1.5rem
- 第 8 行32px → 2rem
- 第 9 行-8px → -0.5rem
- 第 12 行15px → 0.9375rem
- 第 13 行.5px → 0.0313rem
- 第 13 行2px → 0.125rem
- 第 18 行22px → 1.375rem
- 第 19 行-0.5px → -0.0313rem
- 第 20 行12px → 0.75rem
- 第 29 行32px → 2rem
- 第 29 行48px → 3rem
这是一种谨慎的文本转换，而不是完整的 CSS 解析器，所以发布前请检查输出。它看不到值在哪里被使用：存放在变量中或传给 mixin 的断点会在写出它的地方被转换，指向像素尺寸雪碧图的像素偏移量也是如此。HTML style 属性中的值位于引号内，因此保持不变。
工作原理
rem 就是像素除以根字号。
1rem 等于一个根字号，即 html 元素的字号。在所有主流浏览器中它默认是 16px，除非网站或访问者修改了它。换算只需一次除法：px ÷ 根字号 = rem；反过来是一次乘法：rem × 根字号 = px。em 的原理相同，只是参照的数字不同：对 font-size 本身来说是父元素的字号，对其他属性来说是元素自身的字号。算术很简单，这个页面的价值在于把根字号、舍入和各种边界情况都处理清楚。
- 01
设置根字号
保持 16px（所有主流浏览器的默认值），或选择你的项目在 html 上设置的根字号。如果使用 62.5% 方案，请选择 10px，此时 1rem 等于 10px。设置区还会显示应写进 CSS 的百分比，这样访问者自己的字号设置依然有效。
- 02
在任一输入框中输入数值
输入像素读取 rem，或输入 rem 读取像素，两个输入框保持联动。把第二个输入框切换为 em 并填写父元素字号，即可换算嵌套元素。可选择 2 到 6 位小数，末尾的零会被去掉。
- 03
粘贴一次，转换整个样式表
把 CSS 粘贴到批量转换器中，每个 px 值都会变成 rem，反之亦然。1px 边框、媒体查询、注释、字符串和 url() 值保持不变，每处更改按行列出，结果可以复制，也可以下载为 .css 文件。
为真实的样式表打造
单个数值、嵌套 em 和整个文件，任意根字号都适用。
em 嵌套，自动算好
可按任意父元素字号换算，还能建立一串嵌套的 em 字号，看到 1.25em 里的 0.875em 最终对应的精确像素值，旁边还列出不会叠加的 rem 值。
可点击的对照表
当前根字号下从 1px 到 96px 的常用尺寸，每个都附有 rem 值和对应的 Tailwind 间距刻度。选择一行，它的 rem 值就会复制到剪贴板。
整个样式表，谨慎转换
批量转换器会跳过注释、引号中的字符串、url() 值和转义的类名，能正确处理 -0.5px 和 .5px，还可以按需把 1px 细线保留为像素。每处更改都会在输出中高亮，并按行列出。
正确处理媒体查询
在媒体查询中，rem 参照的是浏览器的初始字号，而不是你给 html 设置的根字号。默认情况下断点保持不变；如果选择转换，无论根字号设为多少，都会除以 16。
如实说明舍入
当数值无法整除时，页面会注明已经舍入，并在旁边显示保留十位小数的值，只有在没有截断任何位数时才称其为精确值。对照表中经过舍入的行会被标出，批量转换器也会统计每个舍入的值。
rem 与 px 常见问题
根字号、em、媒体查询和 62.5% 技巧。
如何把 px 转换为 rem？+
用像素值除以根字号：rem = px ÷ 根字号。在浏览器默认的 16px 根字号下，24px ÷ 16 = 1.5rem，14px ÷ 16 = 0.875rem，12px ÷ 16 = 0.75rem。如果你的样式表设置了不同的根字号，就除以那个值：根字号为 10px 时，24px 等于 2.4rem。根字号是 html 元素的字号，而不是 body 或你正在设置样式的元素的字号。
1rem 等于多少 px？+
1rem 等于根字号，在所有主流浏览器中默认是 16px。不过它并不是固定值。如果样式表设置了 html { font-size: 62.5% }，1rem 就变成 10px；如果访问者在浏览器设置中把默认字号调大到 20px，那么在所有没有修改根字号的网站上，1rem 对他来说就是 20px。这种可变性正是这个单位存在的意义。
如何把 rem 转换为 px？+
乘以根字号：px = rem × 根字号。在默认的 16px 根字号下，1.5rem × 16 = 24px，0.875rem × 16 = 14px，2.25rem × 16 = 36px。对照设计稿检查页面时请记住，这个结果是默认设置下访问者看到的尺寸；选择了更大默认字号的人会看到所有 rem 值按比例放大。
rem 和 em 有什么区别？+
rem 始终参照根（html）字号，所以 1.5rem 在页面任何位置的含义都相同。em 参照的是局部字号：对 font-size 属性来说是父元素的字号，对 padding、margin、width 等其他长度来说是元素自身的计算字号。因此 em 在嵌套时会叠加。一个 0.875em 的列表嵌套在另一个 0.875em 的列表中，结果是外层尺寸的 0.875 × 0.875 = 0.766，从 16px 开始算就是 12.25px。rem 从不叠加，所以它通常是字号的首选；而 em 仍然适合那些应随所包围文字缩放的间距，比如按钮的 padding。
为什么字号要用 rem 而不是 px？+
因为 rem 会尊重访问者的默认字号。大多数桌面浏览器允许用户调大这个默认值，许多低视力用户也确实会这样做。这个设置会改变根字号，因此所有用 rem 或 em 设定的尺寸都会随之变大。用 px 写的字号则完全忽略这个设置。页面缩放对 px 和 rem 的放大效果相同，所以区别不在缩放，而在字号偏好设置：当人们想让文字变大、又不希望其他所有东西一起变大时，选择的就是这个设置。
html { font-size: 62.5% } 有什么作用？这样做好吗？+
16px 默认值的 62.5% 是 10px，所以它让 1rem 等于 10px，换算变成简单的移动小数点：24px 是 2.4rem，14px 是 1.4rem。由于它是百分比，仍会尊重访问者调大的默认字号（默认 20px 时根字号为 12.5px）。代价是：凡是忘了设置字号的地方，文字都会掉到 10px，所以你需要 body { font-size: 1.6rem }；假定根字号为 16px 的第三方组件会以预期尺寸的 62.5% 显示；Tailwind 的间距刻度也会随之缩小，p-4 变成 10px；而媒体查询完全不受它影响。千万不要改用 px 设置根字号（html { font-size: 10px }），因为那会覆盖访问者的设置。
边框应该用 rem 吗？+
通常不应该。1px 边框是一条细线，本来就该保持细线。写成 0.0625rem 后，它会随根字号增长到小数宽度，比如根字号为 20px 时是 1.25px，而浏览器通常会把边框宽度对齐到整数设备像素，因此不同元素之间的线条可能粗细不一。需要随文字缩放的粗装饰边框和轮廓线用 rem 或 em 则没有问题。这就是批量转换器可以在转换其他所有值的同时，把 1px 值保留为像素的原因。
rem 能在媒体查询中使用吗？+
可以，但含义和其他地方不同。在媒体查询中，rem 和 em 都参照浏览器的初始字号，也就是访问者的默认字号（除非修改过，否则为 16px），而绝不会参照你在 html 上设置的字号。所以即使设置了 html { font-size: 62.5% }，在默认设置下 @media (min-width: 48rem) 仍在 768px 处生效，而不是 480px。当访问者调大默认字号时，用 rem 或 em 写的断点会移到更宽的视口，这样大字号用户看到的是更宽松的窄屏布局，而不是被挤进多栏之中。本页面默认不转换媒体查询；如果你选择转换，无论设置了什么根字号，都会除以 16。
为什么 rem 值的小数位这么多？+
因为大多数像素尺寸并不是根字号的整齐分数。在 16px 根字号下，15px 是 0.9375rem，13px 是 0.8125rem，二者都是精确值；在 18px 根字号下，10px 是 0.5555 无限循环。保留四位小数可让任何 16px 根字号下的值与原值相差不到 0.0008px，远低于屏幕能显示的精度；而保留两位小数最多可能相差 0.08px。末尾的零会被去掉，所以 1.5000 写作 1.5。
可以安全地转换整个 CSS 文件吗？+
大体可以，只要你检查一遍结果。批量转换器是一种谨慎的文本转换，而不是完整的 CSS 解析器：它会跳过注释、引号中的字符串、url() 值、转义的类名和媒体查询条件，并转换它找到的其他所有 px 值。它看不到值在哪里被使用，所以存放在 Sass 变量中或传给 mixin 的断点会在写出它的地方被转换，指向像素尺寸雪碧图的 background-position 偏移量也是如此。更改列表会按行显示每一处修改，发布前请检查这些情况。
更多专注好用的工具，随时待命。
探索不断扩充的工具合集，涵盖计算、文档、写作和日常工作。