PX 转 REM 换算

功能简介

这个工具在像素和相对单位 rem、em 之间换算 CSS 长度。输入单个值（如 24px）得到 1.5rem；每行一个值可以一次换算多个；粘贴整段样式表，其中所有 px 值都会被原地改写。对照表列出了当前基准字号下 1px 到 128px 的常用尺寸。所有内容都只在浏览器里处理。

使用方法

1. 粘贴 CSS，或者每行输入一个数值。不带单位的数字按 px 处理（反向换算时按 rem/em 处理），写了另一种单位的值会自动反向换算。
2. 设置「基准字号」。所有浏览器的默认值都是 16px；有些项目会写 html { font-size: 62.5% }，让 1rem = 10px。
3. 选择「方向」（px → rem 或 rem → px）、「单位」（rem 或 em）以及保留几位「小数位」。
4. 需要时设置「小于此值保留 px」，让 1px 边框等细线保持 px。
5. 点结果上方的按钮复制。

示例

/* before */
.title { font-size: 24px; margin-bottom: 12px; }

/* after (base 16px) */
.title { font-size: 1.5rem; margin-bottom: 0.75rem; }

不是 px 的值，比如百分比、颜色、url() 里的文件名和 .mt-16px 这样的类名，都不会被改动。0px 会写成 0。

px、rem 和 em

• px 是绝对单位，不理会读者设置的首选字号。
• rem（root em）是 html 元素字号的倍数。读者把浏览器字号设成 20px 时，1rem 就是 20px，整个布局随之缩放。
• em 是当前元素字号的倍数。适合需要跟随所在文字大小的间距，但嵌套的 em 会相乘，所以默认用 rem 更稳妥。

媒体查询也会转换：@media (min-width: 768px) 变成 48rem（或 48em），读者放大文字时断点依然一致。注意在媒体查询里，rem 和 em 都以浏览器默认字号为准，而不是你在 html 上设置的字号。