PX转REM转换器_像素rem即时换算

使用方法

PX转REM转换器把「像素」一步换成「rem」，只要三步：

「像素 px」填要转换的数值，演示值 16；「根字号 root」填你项目里 :root 的字体大小，默认 16。
点「换算 rem」，或在任一输入框按 Enter。三张卡片给换算结果、根字号 10 的对照值、以及反向校验；下方文本框可批量粘多行像素一起转。
批量：在「批量像素」每行写一个值（示例已填 16/32/48/64），点「批量转换」，结果进只读框，按「复制批量结果」整段拿走；想还原演示值按「载入示例」。

PX转REM转换器能解决什么

它把「写死像素」改成「随根字号缩放」这件前端适配常做的事，变成一步读数，适合三类场景：

响应式布局：把设计稿的 16px、32px 间距换成 1rem、2rem，根字号一调，整页随屏幕放大缩小，免得逐个改 px。
跨框架对齐：有的方案 root 设 16、有的设 10；本页同时给两种对照，16px 在两者下分别是 1rem 与 1.6rem，方便和团队规范对齐。
批量整改旧代码：把一整列 px 值粘进批量框，一次性拿到 rem 串，复制回样式表，比手算快且不出错。

本页不做的事：不解析你的 CSS 文件（只做数值换算）；不处理 em（em 基于父元素，rem 基于根，是两回事）；不替你决定 root 该设多少，那由你的设计系统定。

原理和变量

① 用了哪个具体函数：核心是除法运算 rem = px / root，配合 Number(v.toFixed(4)) 保留四位小数；批量时按行 split('\n') 再逐行求值，空行原样保留。

② 关键参数为什么这样取：根字号默认 16，是因为浏览器默认 :root 字号就是 16px，此时 1rem = 16px，最符合直觉；很多 UI 库把 root 改成 10 让「除以 10」好心算，本页用同一公式只是换分母。

③ 遵循哪个标准：rem 来自 W3C CSS Values 规范，定义为「根元素字体大小的倍数」；本页的换算与浏览器渲染口径一致，结果可直接写进 CSS 的 font-size、margin 等属性。

④ 输入怎么变成输出：px = 16、root = 16 → rem = 16 ÷ 16 = 1.0000；px = 32 → 2rem；px = 48 → 3rem。卡片还附反向校验：1rem × 16 = 16px，确认没算反。

⑤ 边界与阈值：px 允许 0～100000；root 限 1～100，下限 1 是为避免除以零，上限 100 是常见工程上限；批量时空行跳过、非数字行标注「非数字」而非整段报错。

⑥ 常见误用的正确解释：rem 不是 px，它会随根字号缩放（适合响应式），而 px 是固定尺寸；把 root 填 0 会触发除零被拦下；rem 基于根元素不是父元素，别和 em 搞混——em 才随父级变。

完整示例（数值仅作演示）

保持演示值：根字号 16，批量示例 16 / 32 / 48 / 64。

16px ÷ 16 = 1.0000 rem。
32px ÷ 16 = 2.0000 rem。
48px ÷ 16 = 3.0000 rem。
64px ÷ 16 = 4.0000 rem。
若根字号改 10：同上四值变为 1.6 / 3.2 / 4.8 / 6.4 rem。

这些数字与页面默认卡片、对照表第 16 行、批量框输出完全一致，可三处核对。

输入范围与对照表

PX转REM转换器的对照表固定根字号 16 与 10 两列，列出 1～16px 的 rem 值，帮你建立「像素—rem」的直觉：

常见像素在两种根字号下的 rem（16px 即 1rem）
像素 px	rem（根 16）	rem（根 10）	说明
1	0.0625	0.1000	1px 细线
2	0.1250	0.2000	—
3	0.1875	0.3000	—
4	0.2500	0.4000	1 间距单位
5	0.3125	0.5000	—
6	0.3750	0.6000	—
7	0.4375	0.7000	—
8	0.5000	0.8000	2 间距单位
9	0.5625	0.9000	—
10	0.6250	1.0000	根 10 下基准
11	0.6875	1.1000	—
12	0.7500	1.2000	3 间距单位
13	0.8125	1.3000	—
14	0.8750	1.4000	—
15	0.9375	1.5000	—
16（演示值）	1.0000	1.6000	根 16 下基准

对照表能直观看出：根字号 16 时每 4px 是 0.25rem（一个间距单位）；根字号 10 时每 10px 才是 1rem，差距一目了然。

结果边界和舍入

舍入位置：rem 值保留四位小数（Number(v.toFixed(4))）。因为先 toFixed 再拼接，演示值不会出现 1.0000000000000002 这样的浮点尾巴。

什么时候会拒绝计算：px 为负、为空、不是数字时；root 为 0、为负、超过 100 或不是数字时。px 为 0 是允许的，此时 rem 自然为 0，代表退化的「没有尺寸」。

精度和用途：四位小数对 CSS 足够；若你的设计系统只取到两位，复制后自行四舍五入即可。结果写进样式表前，建议和团队约定的 root 再对一遍。

结果性质：这是固定 root 下的数值换算，不保证视觉一致——实际渲染还受字体、盒模型影响，本页只解决单位换算这一步。

常见问题

rem 和 px 到底差在哪？

px 是固定像素，不随设置变；rem 是「根字号的多少倍」，根字号一改，所有 rem 尺寸同比例缩放。做响应式适配通常用 rem，做精确裁切用 px。

root 该填多少？

填你项目里 :root 的 font-size。浏览器默认 16，所以多数情况填 16；若团队把根设成 10 方便计算，就填 10。填错会让整列 rem 都偏掉。

rem 和 em 是一回事吗？

不是。rem 看根元素，em 看父元素；同一段文字在不同父级下 em 结果不同，rem 始终一致。本页算的是 rem，不是 em。

根字号能填 0 吗？

不能。rem = px ÷ root，root 为 0 会除以零；本页已把 root 下限设为 1 并给出提示，避免无意义结果。

批量里混了空行或非数字会怎样？

空行原样保留、不报错；非数字行会标成「xxx → 非数字」，其余正常转换，方便你定位脏数据。

四位小数太多，能更少吗？

当前固定四位以满足精度。若想两位，复制结果后在编辑器批量替换即可；后续可按需调整输出位数。

我的输入会被保存或上传吗？

不会。全部计算在浏览器内完成，刷新即清空；可在 Network 面板复查，点「换算 rem」时没有任何请求发出。

结果能直接粘进 CSS 吗？

能。单值卡片给的是纯数字加 rem 单位，批量结果每行形如「16px = 1rem」，去掉前缀即可写入样式表。记得根字号和项目保持一致。

PX转REM转换器