在线 px 与 rem 双向换算器：支持自定义 root font-size、常用字号速查表（12/14/16/24/32px 对应 rem 值）。响应式布局开发必备，浏览器本地计算。
摘要：px 与 rem 双向换算：自定义 root font-size、常用字号速查表，响应式布局开发必备。
本地工具可在 DevTools → Network 搜索输入内容，通常不会出现在请求中。
下一步
使用指南
设计稿 px 与 CSS rem 来回换算，根字号一改全站间距都要重算。本工具按基准 font-size 双向转换 px↔rem/em，适合统一设计 token——纯计算，无上传。
1. 换算
输入基准根字号（常见 16 或 10），填入 px 或 rem，读取另一侧结果。把常用间距一次换算齐，写进变量表，避免页面里混用裸 px 与 rem。
- 设定根字号基准。
- 输入 px 或 rem。
- 复制结果写入 token。
2. 项目实践
团队先约定根策略：保持 16px，或 html 62.5% 让 1rem≈10px 便于心算。约定比工具重要；工具只保证算术正确。
- 文档化根策略。
- 组件库与业务页同一基准。
- 避免同文件混用两套心智。
3. 别踩坑
em 相对父元素，不是根；嵌套 em 会连乘。媒体查询里用 px 还是 rem 有兼容与偏好争议——按团队规范，不要混合试验结果直接上生产。
4. 62.5% 技巧与边界
根设 62.5% 后心算方便，但第三方组件若假设 16px 会缩小。引入外部 UI 库时要回归导航与表单字号，必要时在局部重置。
5. 和通用单位转换
只关心 px/rem/em 用本页；还要 vw/pt 用通用单位页。两者结果应在同一基准下交叉验证一次。
6. 验收
改根字号后看 1rem 间距是否仍对齐栅格；抽查弹层、表格、按钮。发现魔法数就换算进 token，减少下一次灾难。
常见问题
经验法则：字号用 rem（跟随用户浏览器设置缩放，无障碍友好），边框用 px（1px 分隔线不该随字号变粗），间距看团队约定（rem 利于整体缩放，px 利于像素精确）。先约定根策略再换算——约定比工具重要，工具只保证算术正确。
默认 16px（浏览器根字号）。基准一改，所有 rem 值按新基准重算；设计稿基准不同（如 20px）时在工具里修改基准，速查表会同步更新。
心算确实方便，不少团队会约定采用。代价是第三方组件若假设 16px 根字号会整体缩小：引入外部 UI 库后要回归检查导航与表单字号，必要时在局部把字号重置回去。
em 相对父元素而不是根：嵌套的 em 会层层连乘，同一个写法在不同层级得到不同尺寸。换算前先分清手里是哪个单位，别把 em 当 rem 填进工具。
两种写法都有支持者，兼容与偏好上存在争议——按团队规范统一，别把没验证过的混合用法直接上生产。换算结果建议统一写进变量/token 表，避免页面里混用裸 px 与 rem。
相关工具
相关文章
CSS 单位分界:px、rem、em 各管什么,换算怎么不出错
px 转 rem 的公式与速查表、rem 与 em 的分界(root 相对 vs 父级相对)、62.5% 技巧的利弊、媒体查询里的 rem 陷阱、浏览器最小字号限制,附在线 CSS 单位换算工具。
在线 XML/JSON 转换器：数据格式互转工具
学习如何在 XML 和 JSON 格式之间转换数据。了解属性/@ 前缀、CDATA、数组折叠与校验错误定位，以及在 API 集成与遗留系统对接中的用法。
在线颜色转换器：HEX、RGB、HSL 颜色格式互转
学习如何使用在线颜色转换器在 HEX、RGB、HSL、RGBA、HSLA 格式之间转换。了解透明度通道、现代 CSS 语法与前端配色中的对比度检查。