PX ⇄ REM
px 与 rem 双向批量换算,基准字号可调;写响应式样式、迁移设计稿尺寸时一贴即得。
>_ 使用指南 · GUIDE
px 与 rem 双向批量换算,基准字号可调(默认 16px):贴入一串数值(设计稿标注、样式表片段),全部结果一次给出。写响应式样式、把设计稿尺寸迁到 rem 体系时,一贴即得,不用逐个除 16。
支持小数结果(如 18px = 1.125rem),换算表可整体复制。纯数学换算,本地实时完成。
>_ 常见问题 · FAQ
Q1 · px 和 rem 是什么关系?
rem = root em,相对根元素(html)字号的单位:html 字号 16px 时,1rem = 16px、0.5rem = 8px。与 em 的区别:em 相对父元素字号(会层层叠加),rem 永远锚定根元素—— predictable,是现代响应式布局的主力单位。
Q2 · 为什么推荐用 rem 而不是 px?
rem 让整个页面的尺寸随用户设置/媒体查询统一缩放:改根字号一处,全页等比缩放;老年用户调大浏览器字号,rem 排版跟随放大而 px 固定不变(无障碍短板)。做响应式时媒体查询里只改根字号,就能整体切换疏密档位。
Q3 · 基准字号为什么是 16px?能改吗?
16px 是浏览器默认根字号(历史与可读性平衡的结果),不设 html{font-size} 时 rem 以它为基准。可以改:html{font-size:62.5%} 把基准调成 10px(1rem=10px 便于心算)是常见技巧,但要同步维护无障碍影响(覆盖用户偏好)。本工具基准可调,两种体系都能算。
Q4 · 设计稿的 px 标注怎么批量转成 rem?
把设计稿的一串尺寸(如 16 24 32 48)或样式片段贴进本工具,批量输出 rem 值后逐个替换。规范做法是在团队里统一约定:基准 16px、保留三位小数,转换脚本或本工具输出直接采用,避免每人手算精度不一。
Q5 · 0.5px 边框这类小数 px 怎么处理?
0.5px 是做「细边框」的常用技巧(高分屏生效、老设备回退 1px)。换算成 rem 同样成立(0.03125rem),但如此小的 rem 值可读性差、依赖根字号精确为 16。建议小数 px 原样保留,rem 化主要针对布局尺寸与字号这类「需要整体缩放」的值。