📏 PX转REM
双向转换 · 批量转换 · 常用换算表
常用换算参考表 (根字体: 16px)
| PX | REM | PX | REM | PX | REM |
|---|
双向转换 · 批量转换 · 常用换算表
| PX | REM | PX | REM | PX | REM |
|---|
REM（Root EM）是CSS相对单位，1rem等于根元素(html)的font-size。如果html{font-size:16px}，则1rem=16px。相比EM，REM只受根元素影响，计算更直观。
REM可以让整个页面基于根字体等比缩放，便于实现响应式设计和无障碍访问。用户调整浏览器默认字体大小时，用REM的元素会同步缩放。
大多数浏览器默认html的font-size为16px。主流响应式框架常设为10px（便于计算：1rem=10px）或保留16px。本工具默认为16px。
EM是相对"父元素"字体大小，REM是相对"根元素(html)"字体大小。嵌套结构下EM会层层累乘，容易失控；REM始终参照根元素，结果可预测，所以整站统一用REM更稳。
最简单是直接html{font-size:16px}保留默认。响应式站点常用媒体查询根据屏幕宽度调整根字体，比如移动端设14px、桌面设16px，再配合REM让全站等比缩放。
两者都行。vw绝对跟随视口宽度，做"铺满屏幕"的整页适配很直观；REM配合根字体更灵活，适合需要兼顾无障碍字体缩放的场景。实际项目常混用，纯REM或纯vw都不必迷信。
会。REM基于根元素font-size，用户在浏览器设置里放大默认字体时，html的font-size会一起变，REM布局会自适应放大，这正是无障碍设计想要的。
如果不改根字体，1rem恒等于根字体大小，和屏幕尺寸无关。但很多响应式设计会在大屏上用媒体查询把根字体调大，此时1rem对应的像素值就变大，元素也随之放大。
CSS 中有多种长度单位，理解它们的区别是写出可维护样式的基础：
| 单位 | 基准 | 是否继承 | 适用场景 |
|---|---|---|---|
| px | 像素，绝对单位 | 否 | 边框、阴影等需要固定精度的样式 |
| rem | 根元素(html) font-size | 否（始终相对根） | 全局间距、字号、响应式布局首选 |
| em | 当前元素 font-size | 是（复合嵌套会累积） | 组件内部相对缩放、图标大小 |
| vw / vh | 视口宽度的 1% / 视口高度的 1% | 否 | 全屏 Hero 区域、视口相关尺寸 |
| % | 父元素对应属性 | 是 | 宽度、定位、动画进度 |
大多数桌面浏览器的默认根字体大小是 16px，但这个值可以被用户修改。无障碍设计中，使用 rem 单位的页面会在用户调整浏览器"默认字体大小"时整体缩放，这对视力不佳的用户至关重要。
| 浏览器 | 默认根字号 | 说明 |
|---|---|---|
| Chrome | 16px | 桌面默认 |
| Edge | 16px | 桌面默认 |
| Firefox | 16px | 桌面默认 |
| Safari | 16px | 桌面默认 |
REM 的响应式策略通常分两种：
| 方案 | 做法 | 适用 |
|---|---|---|
| 设计稿换算 | html{font-size:10vw} | 移动端 H5 整页适配 |
| 断点调整 | 媒体查询改根字号 | PC/平板/手机分档 |
| clamp 等比 | font-size:clamp(14px,2vw,18px) | 平滑随视口变化 |
| PX | REM | 常见用途 |
|---|---|---|
| 8px | 0.5rem | 微小间距 |
| 10px | 0.625rem | 辅助文字 |
| 12px | 0.75rem | 小号文字、标签 |
| 14px | 0.875rem | 正文（部分网站） |
| 16px | 1rem | 默认正文、浏览器基准 |
| 18px | 1.125rem | 大号正文 |
| 20px | 1.25rem | 小标题 h4 |
| 24px | 1.5rem | 标题 h3、卡片间距 |
| 32px | 2rem | 标题 h2 |
| 40px | 2.5rem | 标题 h1 |
| 48px | 3rem | 大标题 |
| 64px | 4rem | 超大标题、Hero 区域 |
1. 设置根字体大小（默认16px）。
2. 输入PX值自动计算REM，或输入REM值自动计算PX。
3. 批量转换可用textarea输入多行值。
4. 参考下方换算表。