PX转REM
将 px 换算为 rem，就是把像素值除以根字号：rem = px / 根字号。在浏览器默认的 16px 根字号下，24px / 16 = 1.5rem。调整下方的基准字号（Ant Design 用 14px，62.5% 技巧用 10px），rem 和 em 会随之变化；磅值则跟着像素走，因为 1px 恒等于 0.75pt。
em 字段假设该元素继承上方的基准字号。在 CSS 中，em 相对于元素自身的字号计算；只有用在 font-size 属性本身时，才相对于父元素的字号。
批量转换：粘贴 CSS 或一列 px 数值
每个 px 数值都会按上方的基准字号改写为 rem。
px 怎么换算成 rem？
公式是 rem = px / 根字号，反过来则是 px = rem x 根字号。无论元素嵌套多深，只有根元素 html 的字号才算数，这正是 rem 运算可预测的原因。在默认的 16px 根字号下：10px = 0.625rem，12px = 0.75rem，14px = 0.875rem，18px = 1.125rem，20px = 1.25rem，40px = 2.5rem。
不要对结果四舍五入。在 16px 根字号下，15px 恰好是 0.9375rem；写成 0.94rem 会把渲染尺寸挪到 15.04px，整个栅格的对齐就此被破坏。浏览器会计算亚像素长度，并在绘制时把它对齐到设备像素网格，所以请直接复制换算器给出的精确数值。换算器最多输出六位小数：对 16px、10px 这类能整除的根字号是精确值，对 14px 这类除不尽的根字号则精确到百万分之一 rem。
根字号 16px、14px 与 10px 的 px 转 rem 对照表
同一个像素值会因项目设定的根字号不同而得到三种 rem 结果，因此本表把三种都列了出来，并附上磅值（CSS 规定 1px 为 1/96 英寸、1pt 为 1/72 英寸，因此 1px = 0.75pt）。16px 与 10px 两列是精确值。根字号为 14px 时大多除不尽，这些数值保留四位小数并标有约等号；上方的换算器会给出更多位数。
| 像素 | rem（根字号 16 px） | rem（根字号 14 px） | rem（根字号 10 px） | 磅 |
|---|---|---|---|---|
| 1px | 0.0625rem | ≈0.0714rem | 0.1rem | 0.75pt |
| 2px | 0.125rem | ≈0.1429rem | 0.2rem | 1.5pt |
| 4px | 0.25rem | ≈0.2857rem | 0.4rem | 3pt |
| 8px | 0.5rem | ≈0.5714rem | 0.8rem | 6pt |
| 10px | 0.625rem | ≈0.7143rem | 1rem | 7.5pt |
| 12px | 0.75rem | ≈0.8571rem | 1.2rem | 9pt |
| 14px | 0.875rem | 1rem | 1.4rem | 10.5pt |
| 16px | 1rem | ≈1.1429rem | 1.6rem | 12pt |
| 18px | 1.125rem | ≈1.2857rem | 1.8rem | 13.5pt |
| 20px | 1.25rem | ≈1.4286rem | 2rem | 15pt |
| 24px | 1.5rem | ≈1.7143rem | 2.4rem | 18pt |
| 28px | 1.75rem | 2rem | 2.8rem | 21pt |
| 32px | 2rem | ≈2.2857rem | 3.2rem | 24pt |
| 36px | 2.25rem | ≈2.5714rem | 3.6rem | 27pt |
| 40px | 2.5rem | ≈2.8571rem | 4rem | 30pt |
| 48px | 3rem | ≈3.4286rem | 4.8rem | 36pt |
| 64px | 4rem | ≈4.5714rem | 6.4rem | 48pt |
| 80px | 5rem | ≈5.7143rem | 8rem | 60pt |
| 96px | 6rem | ≈6.8571rem | 9.6rem | 72pt |
px、rem 还是 em：该用哪个单位？
实用的分工：凡是要跟随读者文字大小的用 rem，必须跟随元素自身字号的用 em，只有必须保持物理固定的长度才用 px。示例一列假设根字号为 16px、父元素也是 16px。
| 单位 | 相对于 | 20px 等于 | 最适合 | 是否跟随读者的文字大小 |
|---|---|---|---|---|
| px | 不相对于任何值——绝对单位（1px = 1/96 英寸） | 20px | 发丝般的细边框、焦点环、精确的图标尺寸 | 否 |
| rem | 根元素 html 的字号 | 1.25rem | 字号、间距、断点，以及整套排版比例 | 是 |
| em | 元素自身的字号（设置 font-size 时则为父元素的字号） | 1.25em | 需要随所包裹文字一起变大的内边距 | 是 |
| % | 父元素在该属性上的取值 | 125% | 流式宽度与遗留的 font-size 继承链 | 是（font-size） |
内边距、外边距和边框该用 px 还是 rem？
凡是应当随文字变大而变宽松的内外边距都用 rem：按钮内边距、卡片间距、区块间距、栅格间隙。发丝般的细线则保留 px。1px 边框就是一个清晰的设备无关像素，而同样的边框写成 0.0625rem 时，在某些缩放级别下可能被舍入为零或变糊，2px 的焦点环和分隔线同理。这正是上方批量转换默认不改动 1px 与 2px、只改写其余数值的原因。
媒体查询是 rem 另一个值回票价的地方。在媒体查询内部，rem 相对于浏览器的初始字号而非你写的 html 规则解析，所以 48rem 的断点对使用默认设置的读者等于 768px，对调大了文字的读者则会变大。用 px 写的断点则永远不动。
在 Figma、VS Code 和 Tailwind 里怎么把 px 换成 rem？
Figma 以 px 计量，但 Dev Mode 可以输出 rem：打开 Inspect 设置，选择「Set unit scale」并填入你的根字号（默认 1rem = 16px）。cssrem 之类的 VS Code 扩展通过自动补全完成换算，并把根字号做成配置项（cssrem.rootFontSize，默认为 16），所以在 14px 的项目里采信结果前先确认它是否匹配。整份文件则粘贴到上方的批量转换框，并先设好基准字号。Tailwind 的默认比例在 16px 根字号下已经是 rem 制：一个间距单位是 0.25rem（4px），因此 16px 是 4，24px 是 6，40px 是 10。
参考来源
关于PX转REM
这个 px 转 rem 换算器只回答一个问题：在你的项目真正使用的根字号下，设计稿里的像素值写进 CSS 后会变成多少？拖动下方的基准滑块——16px 是浏览器默认值，14px 是 Ant Design 的取值，10px 是老派的 62.5% 技巧——页面上每一个 rem 和 em 数值都会据此重算，你再也不用记住某个数字当初是按哪个基准写的。
要填入的基准，是你的样式表在 html 元素上设定的字号——不是 body，也不是你正在处理的那个组件的字号。如果没有任何规则设定它，就采用浏览器默认值：除非读者自己调高，否则是 16px。在开发者工具里选中 html 节点，读出它的计算后 font-size，这个数就是整份样式表的除数。四个框架按钮会替你填上 Tailwind、Bootstrap、Material UI 和 Ant Design 的取值。
这里真正的特色是批量模式：粘贴一份样式表、一段来自 Figma 的标注导出或者一串纯数字，就能拿回 rem 版本，并附上改动数量，可直接复制或导出为 CSV。工具下方还有双向公式、覆盖 1px 到 96px、三种根字号并带磅值的对照表、单位对比表，以及十个展开作答的问题。
使用场景
如何使用
设置基准（根）字号：16px 是浏览器默认值，14px 对应 Ant Design，10px 则是 62.5% 技巧。
在“像素”字段中输入像素值，rem、em 和 pt 三个字段会随输入即时更新。
也可以反过来：输入一个 rem 值，看它在当前根字号下等于多少像素。
点按 8px 至 96px 快捷表中的任意数值即可载入，或查阅 16px、14px 与 10px 根字号的完整对照表。
把整段 CSS 粘进批量转换框，即可一次改写所有 px 数值，同时保留 1px 与 2px 的边框。
复制生成的 CSS 声明，或把转换后的 px/rem 对照下载为 CSV，用于设计交付。
专业提示
- 先设定基准字号：页面上所有 rem 和 em 数值都由它决定——输入框、快捷按钮和批量转换结果，所以切换到 14px 根字号会一次性重算全部数值。
- 1px 与 2px 的边框请保留 px。亚像素边框在某些缩放级别下可能被舍入为零，这正是批量模式默认跳过它们的原因。
- pt 不依赖根字号：无论基准是 16px 还是 10px，24px 都等于 18pt，所以拖动滑块时“磅”字段不会变。
- 每次拖动基准滑块，批量转换都会重新运行，因此不必粘贴两次就能看到同一份样式表在 16px 与 14px 根字号下的结果。
- 只有当某个数值必须跟随所在元素自身的字号时才用 em，例如包裹文字的按钮内边距；其余一律用 rem，这样就不会层层累乘。
常见问题解答
用像素值除以根字号：rem = px / 根字号。浏览器默认根字号是 16px，因此 24px / 16 = 1.5rem，10px / 16 = 0.625rem。对 rem 来说，无论元素嵌套多深，只有根元素的字号才起作用，这正是整份样式表中运算保持可预测的原因。
在默认的 16px 根字号下，1rem = 16px，1.5rem = 24px，2rem = 32px；这里要用乘法而不是除法：px = rem x 根字号。若根字号像 Ant Design 那样是 14px，1rem 就降为 14px，1.5rem 变成 21px。脱离根字号的 rem 数值毫无意义，所以务必同时说明基准。
用 px 写的字号会无视读者在浏览器里选定的文字大小：把默认值调到 20px 的人，看到的仍然是你写死的 14px。rem 是按这个设置来度量的，所有尺寸会一起缩放。WCAG 2.2 的成功标准 1.4.4 要求文本能承受 200% 的放大，而基于 rem 的排版比例无需任何额外媒体查询就能做到。
rem 始终相对于根元素 html 的字号。em 相对于书写它的那个元素自身的字号，唯一的例外是 font-size 属性本身，此时它相对于父元素的字号解析。这正是嵌套字号会层层累乘的原因：0.9em 套 0.9em 再套 0.9em，结果是原值的 0.729。rem 永远不会累乘，因此在排版比例和布局间距上它是更稳妥的默认选择。
凡是应当随文字变大而变宽松的内外边距都用 rem：按钮内边距、卡片间距、区块间距。细线仍用 px：1px 边框始终清晰，而它的 rem 等值在某些缩放级别下可能被舍入为零或变糊。这正是本页批量转换默认把 1px 与 2px 保留为 px 的原因。
除非框架另有要求，否则请保持 16px，因为这与浏览器默认值一致。Ant Design 使用 14px 根字号。62.5% 技巧把 html { font-size: 62.5% } 设为 1rem = 10px，算式变成 px / 10：24px 就是 2.4rem。它仍然跟随读者自己的设置——20px 默认值的 62.5% 是 12.5px——但之后你必须写上 body { font-size: 1.6rem }，否则每个段落都会以 10px 渲染；而且为 16px 根字号编写的第三方组件会显得太小。上方表格列出了这三种根字号。
在检查器里读出数值，再除以你的根字号：28px 的标题在 16px 根字号下是 1.75rem，12px 的图注是 0.75rem。Dev Mode 也能直接输出 rem——打开语言下拉框旁边的 Inspect 设置，选择「Set unit scale」并填入你的根字号（默认 1rem = 16px）。把整段导出的代码粘贴到上方的批量转换框，就能一次改写所有数值。
可以，而且通常更好。在媒体查询内部，rem 相对于浏览器的初始字号解析，而不是你写的 html 规则，所以 48rem 的断点在默认设置下等于 768px，对放大了文字的读者则会变大。em 在那里的行为相同。用 px 写的断点无论读者如何设置都固定不变。
不该。浏览器会计算亚像素长度并在绘制时对齐到设备像素，所以 0.9375rem 在 16px 根字号下正好渲染为 15px。写成 0.94rem 会变成 15.04px，这个误差会沿着栅格或垂直韵律不断累积。请复制换算器输出的精确数值，把对齐交给浏览器。
CSS 规定 1px 为 1/96 英寸、1pt 为 1/72 英寸，因此 1px = 0.75pt，16px = 12pt；这就是表中磅值一列背后的比例。Android 的 dp 是另一套体系，在 160 dpi 下 1dp = 1px，所以 Material 的 16dp 间距在网页上接近 16px，而不是某个 rem 换算结果。