通用实用 · 前端换算
px / rem / em 换算
设计稿给的是 px，代码里要写 rem。填一次根字号，三个单位立刻互通，还能把整段尺寸批量粘进来一次转完，顺手生成字号阶梯。
- 三单位互通：px ↔ rem ↔ em，em 可单独指定父级字号。
- 批量换算：多值一次粘贴，生成可复制的对照表。
- 阶梯生成：按比例出一套字号变量，直接粘进 CSS。
单位换算
实时计算浏览器默认 16px，若项目设了 62.5% 则填 10。
em 相对父元素，不是相对根元素。
输入单位
批量换算
逗号、空格或换行分隔粘贴多个尺寸，一次得到 px / rem / em 三列结果。
常用尺寸速查
点一下填入上方字号阶梯生成
AI 字号方案建议
需人机验证让 AI 按你的项目类型给一套字号阶梯与响应式断点建议。首次点击会先弹出点选验证码。
px、rem、em 到底该用哪个
三者不是新旧关系，而是各自解决不同问题。
rem 适合做全局尺度
rem 只认根元素字号，改一个 html { font-size } 就能等比缩放整套间距与字号，是响应式排版的基础。设计稿按 px 标注时，除以根字号即得 rem：16px ÷ 16 = 1rem。
em 适合做组件内部相对关系
em 相对当前元素的父级字号，会层层叠加。按钮内边距写成 0.75em，按钮字号一变，内边距自动跟着变。但也因为会继承，嵌套过深时容易算不清，所以组件级用 em、页面级用 rem 是好习惯。
px 并非不能用
边框、1px 分隔线、阴影这类需要绝对精确的地方用 px 更稳。混合使用时注意浏览器最小字号限制（中文一般 12px 起），以及 Safari 在输入框字号小于 16px 时会自动放大页面。
根字号改成 62.5% 的取舍
把根字号设成 10px 后，1rem = 10px，心算方便。但这会让 rem 与「用户浏览器字号设置」脱钩，可访问性变差。更稳妥的做法是保留 16px，用 calc 或设计令牌换算。
常见问题
为什么 1rem 换算出来不是 16px？
说明项目或浏览器把根字号改过了。先确认 html 上的 font-size，再把实际值填进根字号输入框，换算才准确。
em 换算结果每次都不一样？
正常。em 依赖父元素字号，同样的 2em 在 14px 容器里是 28px，在 20px 容器里是 40px。换算前请填写真实的父级字号。
移动端适配还需要用 vw 吗？
vw 适合做整屏等比缩放，但会影响可访问性且在大屏上失控。目前更推荐 rem + clamp() 的方案，让字号在区间内平滑变化。