无需登录 数据私有 本地保存

REM与PX转换器 - 基于根字号大小互转

18
0
0
0

基于根字号（root font-size）快速转换 REM 与 PX，支持自定义根字号，实时计算，前端开发必备。

根字号
px
PX REM 像素转REM
px
--
REM PX REM转像素
rem
--
常用 PX → REM 换算参考 根字号：16px
PX REM
常见问题 & 知识点

REM（Root EM）是 CSS3 引入的相对长度单位，它相对于 HTML 根元素（<html>）的 font-size 来计算大小。例如根字号为 16px 时，1rem = 16px，2rem = 32px。与 EM 不同，REM 只参考根元素，不受父级元素字号影响，嵌套层级再多也不会产生累积效应，因此更加可控和易于维护。

  • PX（像素）：绝对单位，固定大小，不受其他元素影响。1px 就是屏幕上的一个物理像素点（在标准分辨率下）。
  • REM（根元素相对单位）：相对单位，大小随根元素字号变化。修改根字号可全局缩放所有使用 REM 的元素。
  • 核心差异：PX 是"死的"，REM 是"活的"。使用 REM 可以轻松实现全局等比缩放，特别适合响应式设计和无障碍访问（用户调整浏览器默认字体大小时，REM 会自动适配）。

所有主流浏览器（Chrome、Firefox、Safari、Edge）的默认根字号均为 16px。这意味着在不做任何设置的情况下，1rem = 16px。用户可以在浏览器设置中调整默认字体大小（如放大到 20px），此时所有使用 REM 的页面元素会等比放大，这是 REM 在无障碍体验方面的重要优势。

在 CSS 中直接设置 html { font-size: 16px; } 即可。常见的做法包括：
  • html { font-size: 62.5%; } —— 利用浏览器默认 16px 的 62.5% = 10px，使得 1rem = 10px，方便心算（如设计稿 18px 直接写 1.8rem）。
  • html { font-size: 16px; } —— 保持默认，兼容性最好。
  • 使用 vw 单位动态设置根字号实现移动端自适应（如 font-size: calc(100vw / 37.5) 等方案）。

  • PX → REM：rem = px ÷ 根字号（例如 32px ÷ 16 = 2rem）
  • REM → PX：px = rem × 根字号（例如 1.5rem × 16 = 24px）
  • 记忆技巧：根字号是"桥梁"，1rem 始终等于根字号的 px 数。根字号 16px 时，1rem=16px；根字号 10px 时，1rem=10px。

这是一个经典的 CSS 技巧：设置 html { font-size: 62.5%; }，利用浏览器默认 16px × 62.5% = 10px，让 1rem 恰好等于 10px。这样一来，设计稿中的 px 值除以 10 就是 rem 值（如 18px → 1.8rem，24px → 2.4rem），无需计算器即可快速换算，极大提升了开发效率。不过需要注意，这个技巧依赖浏览器默认 16px 的假设，如果用户修改了默认字号，比例仍然保持（62.5% 相对缩放），不会破坏布局。

在移动端开发中，REM 是实现多屏幕适配的核心方案之一。常见的做法是将根字号与屏幕宽度关联（如使用 vw 或 JavaScript 动态计算），使页面元素随屏幕宽度等比缩放。例如在 375px 宽的设计稿中设置根字号为 100vw/37.5，则 1rem = 10px（375屏），在 414px 宽的屏幕上 1rem ≈ 11px，元素自动等比放大。结合 postcss-pxtorem 等工具可自动将 PX 转为 REM，大幅简化适配工作。

REM 单位兼容性非常好，所有现代浏览器均完美支持，包括 Chrome、Firefox、Safari、Edge 以及移动端浏览器。IE9+ 也完全支持 REM。根据 Can I Use 数据，REM 的全球浏览器支持率超过 99%，可以放心在生产环境中使用。唯一需要注意的是在 IE8 及以下版本不支持，但这些浏览器已基本被淘汰。

  • 推荐使用 REM：字体大小、间距（margin/padding）、尺寸相关的宽高、布局偏移量等需要响应式缩放的属性。
  • 推荐使用 PX：边框宽度（border-width，通常 1px 不需缩放）、阴影偏移、精细的装饰性线条等不希望随字号变化的地方。
  • 混合使用：大多数项目采用 PX 和 REM 混用的策略，主体布局和文字用 REM，细节修饰用 PX，兼顾灵活性和精确度。

因为 62.5% 是相对值，它的实际像素值取决于浏览器的默认根字号。大多数浏览器默认为 16px，所以 16 × 62.5% = 10px。但如果用户将浏览器默认字号改为 20px，62.5% 对应的就是 12.5px。这里的"约等于"体现了 REM 单位的相对特性——百分比设置保持了与用户偏好的比例关系，这正是无障碍设计的核心理念。本工具支持直接设置 62.5% 对应 10px 的场景，也支持任意自定义根字号。
🔧 相关工具