px ↔ rem 换算
开发者工具根字号基准 · 常用对照表
答案速览
24px ÷ 16 = 1.5rem；em 相对父元素会累积，rem 恒相对根元素；62.5% 技巧使 1rem=10px。
加载中
这个工具对你有帮助吗？
怎么用
- 设定根字号：默认 16px（浏览器标准），用 62.5% 技巧则填 10。
- 输入 px 或 rem：双向实时换算，同时给出 em 参考值。
- 查常用对照表：8~64px 常用档位一次看齐，设计稿标注直接用。
- vw 换算：输入视口宽度，得 px 对应的 vw 值，做流式排版。
核心要点
- rem 锚定根元素：html 字号改则全站 rem 等比缩放——这是响应式与无障碍缩放的基石。
- em 会累积：嵌套组件每层 em 相乘，字号失控的典型根因；组件内部用 rem 更稳。
- 62.5% 技巧：html{font-size:62.5%} 使 1rem=10px，心算零成本——但会覆盖用户字号偏好，需谨慎。
- 媒体查询用 em：@media 中 em/rem 都按浏览器初始 16px 计算，不受根字号覆盖影响。
原理与公式
px ↔ rem 换算
rem = px ÷ 根字号（浏览器默认 16px）
em = 相对父元素字号，嵌套会累积；rem 始终相对根元素
vw 换算：vw = px ÷ 视口宽 × 100
响应式技巧：html 字号设 62.5%（=10px）后 1rem = 10px，心算零成本
示例：根字号 16px 时 24px = 1.5rem；视口 1440px 时 24px ≈ 1.667vw。
常见问题
为什么推荐 rem 而不是 px？
rem 尊重用户的浏览器字号设置（无障碍），且配合根字号媒体查询可实现整站流式缩放。
padding/margin 也用 rem 吗？
推荐。间距随字号等比缩放，排版比例在放大模式下不崩；但边框宽度（1px 发丝线）保持 px。
vw 和 rem 怎么配合？
流式排版：font-size: clamp(14px, 1.5vw, 18px)；组件尺寸用 rem，全屏布局用 vw/vh。
62.5% 技巧有什么坑？
会覆盖用户自定义字号，损害无障碍；现代做法是用 rem 直接除以 16 心算，或 CSS 变量定义间距阶梯。
相关工具
相关指南
来源与更新
换算关系遵循 CSS 值与单位规范（W3C CSS Values and Units Module Level 4）；浏览器默认根字号 16px。
最近更新：
本页公式与内容经一键算团队复核，仅供学习参考，实际业务请以官方口径为准。
引用本页：一键算. px ↔ rem 换算[EB/OL]. https://www.yijiansuan.com/c/dev/px-rem
本工具提供的结果仅供参考，不构成任何专业建议，请以官方核算为准。