PX 转 REM 转换器
新基于根字号在 px、rem、em 与 pt 之间换算。
Browsers default to a 16px root. The 10px preset is the popular 62.5% trick, where 1rem maps to 10px.
| px | rem | copy |
|---|
Runs entirely in your browser. Nothing is uploaded.
px与rem互转，即时同步
这款 px转rem转换器 可在您选定的任意根字体大小下，将 px、rem、em 和 pt 同步联动。编辑任意字段，其余字段实时更新——从像素设计稿转换为可缩放的 CSS rem 单位，或反向将 rem转回px，无需心算。这是一个快速、免费的 CSS单位转换器，完全在浏览器中运行，无任何数据上传。
转换器下方的参考表列出了日常开发中常用的所有 px 值——一键复制任意结果。修改根字体大小后，整张表格立即重新计算，轻松切换16px项目与10px（62.5%技巧）项目。
px转rem公式详解
转换公式很简单：rem = px ÷ 根字体大小。浏览器默认根字体为16px，因此 16px = 1rem，24px = 1.5rem，40px = 2.5rem。反向转换：px = rem × 根字体大小，例如 0.875rem × 16 = 14px。由于转换器支持双向输入，您无需记住转换方向——在已知的字段中输入数值，其余字段自动更新。
62.5%技巧可以简化这一过程：在CSS中设置 html { font-size: 62.5%; }，将根字体设为10px，rem值便能整洁地对应10的倍数。1.6rem = 16px，2.4rem = 24px，3.2rem = 32px。切换到10px预设，即可在所有常用值中看到这种清晰的对应关系。
px、rem 和 em 的区别
px 是绝对单位：16px 始终等于16像素。rem 相对于根元素（html）的字体大小，为整个页面提供统一的参照基准。em 则相对于其父元素的字体大小，因此在嵌套元素中会产生叠加效果——若一个段落在1.2em的section内，section又在1.2em的article内，则最终为1.2 × 1.2 = 1.44em；而1.44rem则固定为根字体大小的1.44倍，不受嵌套层级影响。
工具还显示 pt（1px = 0.75pt），适用于打印样式的值。在16px根字体且无嵌套的情况下，16px、1rem 和 1em 三者相等——只有当父元素字体大小发生变化，或用户调整浏览器默认文字大小时，差异才会显现。
为什么用rem设置字体大小——无障碍访问很重要
使用 rem而非px 设置字体大小，是一项实质性的无障碍改进。当用户在浏览器设置中增大默认文字大小（对于有视力障碍或在高分辨率屏幕上阅读的用户来说十分常见），所有基于rem的字体大小和间距值都会按比例同步缩放。而px值是固定的，可能导致文字相对于容器过小，影响阅读。
WCAG 2.1 指南1.4.4要求文本可放大至200%而不丢失内容或功能。默认使用rem单位可以轻松满足这一要求——当根字体大小改变时，整个排版比例和大部分间距都会相应调整，保持视觉比例不变。这也是 Tailwind CSS 等框架默认使用rem单位的原因。
px转rem常用值对照——快速参考
在标准16px根字体下：8px = 0.5rem，10px = 0.625rem，12px = 0.75rem，13px = 0.8125rem，14px = 0.875rem，16px = 1rem，18px = 1.125rem，20px = 1.25rem，24px = 1.5rem，28px = 1.75rem，32px = 2rem，36px = 2.25rem，40px = 2.5rem，48px = 3rem，64px = 4rem。
这些是CSS开发中最常用的数值。工具中的参考表列出了所有这些值，支持一键复制——比手动计算更快，也不易出错。收藏本 rem计算器，每次需要将设计稿中的像素值转换为CSS rem单位时随时调用。
隐私保护、即时响应、完全免费——无需注册
无需安装，无需注册。所有转换——px转rem、rem转px、px转em、em转px——均在您的浏览器中通过JavaScript本地完成。您输入的数值不会离开您的设备，也不会发送到任何服务器。与某些需要创建账号或观看广告才能查看结果的在线转换器不同，本工具的所有功能均可立即使用，无任何限制。
本工具加载后可离线使用，无使用次数限制，兼容所有设备——桌面端、平板、iPhone 及安卓手机。将此 px转rem转换器 收藏为日常CSS工具，每次将Figma设计稿转换为可缩放CSS时，省去繁琐的心算。
Frequently asked questions
px怎么转rem？
将像素值除以根字体大小即可：rem = px ÷ 根字体大小。浏览器默认根字体为16px，因此 16px ÷ 16 = 1rem，24px ÷ 16 = 1.5rem，40px ÷ 16 = 2.5rem。在上方转换器中输入任意px值，rem字段会立即更新，无需心算。若使用62.5%技巧（根字体设为10px），直接除以10即可：24px = 2.4rem。
rem怎么转px？
将rem值乘以根字体大小即可：px = rem × 根字体大小。在默认16px根字体下，1rem × 16 = 16px，1.5rem × 16 = 24px，0.875rem × 16 = 14px。在转换器中编辑rem字段，px字段会立即跟随更新。转换器支持完全双向输入——输入您已知的值，其余值自动计算。
1rem等于多少像素？
1rem等于根元素（html）的字体大小。在Chrome、Safari、Firefox、Edge等所有主流浏览器中，默认值均为16px，因此在未修改根字体的情况下，1rem = 16px。如果将根字体设为10px（62.5%技巧），则1rem = 10px。用户还可以在浏览器设置中更改默认文字大小，这会改变1rem对应的像素值——这正是rem比px更适合无障碍字体大小的原因。
0.875rem等于多少px？
在标准16px根字体下，0.875rem = 14px（0.875 × 16 = 14）。这是CSS框架中最常用的rem值之一——Tailwind CSS 的 text-sm 类即为 0.875rem（14px）。若使用10px根字体（62.5%技巧），0.875rem = 8.75px。
rem和px有什么区别？
px是绝对固定单位——无论用户设置或屏幕尺寸如何，16px始终是16像素。rem是相对单位：它是根元素（html）字体大小的倍数，默认情况下1rem = 16px，但当用户在无障碍设置中增大浏览器默认文字大小时，rem会随之缩放。这使得基于rem的布局更具无障碍性——当用户需要更大的文字时，字体会按比例放大，而基于px的文字则保持固定，可能变得难以阅读。
px、rem和em有什么区别？
px是固定单位。rem相对于根元素（html）的字体大小——为整个页面提供统一的参照基准。em相对于其父元素的字体大小，因此在嵌套时会叠加：父元素为20px，子元素设为1.5em，则子元素为30px。若将同一子元素设为1.5rem，则为24px（1.5 × 16px根字体），与父元素字体大小无关。在16px根字体且无嵌套的情况下，16px、1rem和1em三者相等——只有当父元素字体大小改变时，差异才会显现。
字体大小用rem还是px更好？
从无障碍角度来看，rem更适合设置字体大小。当用户增大浏览器默认文字大小（视力障碍用户的常见需求）时，所有基于rem的字体大小都会随之缩放，而px值则保持不变。WCAG 2.1 指南1.4.4（文字缩放）要求文本可放大至200%而不丢失功能——使用rem可以轻松满足这一要求。px只适合用于不应缩放的场景，例如1px边框或固定尺寸图标。
CSS中的62.5%技巧是什么？
62.5%技巧是将根元素（html）字体大小设为62.5%——在浏览器默认16px下，这等于10px。这使得rem的计算变得极为简便：1.6rem = 16px，2.4rem = 24px，3.2rem = 32px。每个rem值都整洁地对应10的倍数。在此切换到10px预设，转换器和参考表会立即重新计算，让您直观看到这种清晰的对应关系。其代价是根字体大小会覆盖用户的浏览器默认值，稍微降低了无障碍性。
在16px默认根字体下，常见字体大小对应的rem值是多少？
在标准16px根字体下：10px = 0.625rem，12px = 0.75rem，13px = 0.8125rem，14px = 0.875rem，16px = 1rem，18px = 1.125rem，20px = 1.25rem，24px = 1.5rem，28px = 1.75rem，32px = 2rem，40px = 2.5rem，48px = 3rem。工具中的参考表列出了所有常用值，支持一键复制——比每次手动计算更快。
px转rem在Tailwind CSS中如何应用？
Tailwind CSS默认使用rem单位来表示大多数尺寸值，以16px为根字体。Tailwind的间距比例：1个单位 = 0.25rem = 4px。因此 space-4 = 1rem = 16px，space-6 = 1.5rem = 24px，space-8 = 2rem = 32px。排版方面：text-sm = 0.875rem（14px），text-base = 1rem（16px），text-lg = 1.125rem（18px），text-xl = 1.25rem（20px），text-2xl = 1.5rem（24px）。本转换器可帮助您快速核对任意自定义px值在Tailwind rem体系中的对应关系。
这个px转rem转换器可以离线使用吗？
完全可以。转换器完全在浏览器的JavaScript中运行——没有服务器通信，没有API调用，也不会上传任何数据。页面加载后即可离线使用。您输入的值不会离开您的设备。您可以将其加入书签，在飞机上、隧道中或任何没有网络的地方使用。任何数据都不会存储在任何服务器上。
如何在转换器中更改基础字体大小？
在「根字体大小」输入框中输入任意数值——或使用预设按钮选择16px（浏览器默认）或10px（62.5%技巧）。表格和当前活动输入框中的所有rem、em和pt换算结果会立即重新计算，反映您的新根字体。如果您的CSS设置了 html { font-size: 18px; }，只需将根字体输入18，所有换算结果将精确匹配您项目的实际比例。
