PX 和 REM 怎么换算？前端字号、间距和响应式布局指南

设计稿常用 px，CSS 项目里可能用 rem。rem 基于根元素字号，可以让字号和间距体系更统一。

你可以用 PX REM 换算器 快速换算。

rem 是什么

1rem 等于根元素 html 的字体大小。浏览器默认通常是 16px，所以：

1rem = 16px
0.5rem = 8px
1.5rem = 24px

如果项目把根字号改成 10px，换算结果就不同。

为什么用 rem

rem 适合建立统一尺度，尤其是字号、间距、圆角等。它也更尊重用户浏览器字号设置。

但不是所有东西都要用 rem。边框、图标精确尺寸、某些像素对齐场景，用 px 也很正常。

换算要确认基准

设计师说 24px，开发转成 rem 前要确认基准字号。如果基准是 16px：

24 / 16 = 1.5rem

如果基准变了，所有换算都不同。

不要为了统一而强行 rem

很多项目会把字号、间距用 rem 管理，但边框、阴影偏移、1px 分割线、图标尺寸仍然使用 px。这样并不矛盾。真正重要的是规则清楚，团队知道哪些场景用 rem，哪些场景保留 px。

如果页面要适配用户浏览器字号，正文和表单控件更适合 rem。营销海报、像素风组件、游戏画布、截图导出这类需要精确视觉的模块，px 往往更直接。

和设计稿沟通

交付设计稿时可以约定一个换算基准，比如根字号 16px。开发实现后，不只看静态尺寸，还要测试浏览器缩放、系统字号和移动端显示。尤其是中文页面，字号略小就会明显影响阅读。

迁移旧项目要分批

老项目如果全部从 px 改成 rem，很容易引发布局细节变化。更稳的做法是先从文字和间距 token 开始，保留关键组件的固定尺寸。每次迁移后用截图对比，确认按钮高度、表格密度和弹窗宽度没有意外变化。

总结

PX 和 REM 没有绝对优劣。rem 适合体系化字号和间距，px 适合精确控制。

需要换算时，可以用 PX REM 换算器，并确认项目根字号。