在任一输入框中输入即可。点击表格中的一行可载入数值，也可在下方粘贴 CSS 批量转换。
24px = 1.5rem = 18pt = 150%
| px | rem | pt |
|---|---|---|
| 1px | 0.0625rem | 0.75pt |
| 2px | 0.125rem | 1.5pt |
| 4px | 0.25rem | 3pt |
| 6px | 0.375rem | 4.5pt |
| 8px | 0.5rem | 6pt |
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 28px | 1.75rem | 21pt |
| 32px | 2rem | 24pt |
| 36px | 2.25rem | 27pt |
| 40px | 2.5rem | 30pt |
| 48px | 3rem | 36pt |
| 56px | 3.5rem | 42pt |
| 64px | 4rem | 48pt |
| 72px | 4.5rem | 54pt |
| 80px | 5rem | 60pt |
| 96px | 6rem | 72pt |
| 128px | 8rem | 96pt |
.card {
padding: 1.5rem 2rem;
margin-bottom: 1rem;
font-size: 1.125rem;
line-height: 1.75rem;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
}px 是固定的 CSS 单位，而 1rem 等于根元素 html 的字号，所有浏览器默认都是 16px。用 rem 设置文字、间距和布局，用户在浏览器设置里调大默认字号时，所有内容会一起放大，这是一项重要的无障碍要求（WCAG 1.4.4 调整文本大小）。换算很简单：rem = px ÷ 根字号，所以在 16px 基准下 24px 就是 1.5rem。em 原理相同，但相对于父元素的字号，元素嵌套时会层层叠加。
所有换算都在浏览器中完成，包括你粘贴的 CSS，不会上传任何内容。
确认根字号：除非项目把 html { font-size } 设成了 10px 或 62.5% 等其他值，否则保持 16px。
在 px 框输入数值得到 rem，或在 rem 框输入得到 px。下方一行同时显示 pt 和百分比。
点击表格中的任意一行，载入 1px 到 128px 的常用尺寸。
把一段 CSS 粘贴到批量转换框：所有 px 值都会变成 rem，0px 变为 0，1px 边框可以保留为 px。把结果复制到样式表中。
14 / 16 / 20 / 24 / 32px 的字号比例换算为 0.875 / 1 / 1.25 / 1.5 / 2rem，用户在浏览器里放大文字时，标题也会一起放大。
粘贴用 px 写的旧 CSS，一次性转换 padding、margin 和字号，然后检查媒体查询，把细边框保留为 px。
设计师给的尺寸是 px。把 4、8、12、16、24px 的间距 token 换算成 0.25、0.5、0.75、1、1.5rem，用于设计系统。
有些项目设置 html { font-size: 62.5% }，让 1rem = 10px。把根字号设为 10，24px 就是好记的 2.4rem。
字号和大部分间距用 rem，让布局尊重用户的字号偏好。不需要缩放的边框、阴影和细节仍然可以用 px。
rem 相对于根元素 html 的字号，结果可预测。em 相对于父元素，嵌套的 em 会相乘，适合组件内部，但容易算错。
这是所有浏览器的默认值，但用户可以修改，CSS 也可以在 html 上覆盖。请始终按项目实际使用的根字号换算。
用 em 或 rem 写的媒体查询相对于浏览器默认字号，而不是你的 html 规则，并会随用户放大文字而调整。因此很多团队在媒体查询中使用 em。