PX与REM单位换算工具（PX to REM Converter）
免费的px与rem相互换算工具。可自由修改根元素（html）的font-size基准值，实时查看换算结果，适用于响应式设计和无障碍设计。
PX转REM对照表（基准16px）
假设根元素font-size为浏览器默认值16px时，常用px值对应的rem值。
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 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 |
使用提示
- 浏览器默认1rem等于16px，但视力较弱的用户可能会在浏览器中调大默认字号，使用rem可以让页面自动跟随该设置缩放。
- 媒体查询（@media）的断点通常习惯用px指定，而font-size、padding、margin等间距建议使用rem，这样在用户调整字号偏好时整体版式比例更容易保持协调。
- 有些项目会设置html { font-size: 62.5%; }，使1rem等于10px，方便心算换算（1.6rem等于16px）。可以在上方基准值栏输入10来体验这种换算方式。
- 一种常见约定是页面整体布局用rem，组件内部间距用em，这样组件在任何地方使用时都能跟随自身字号缩放。
常见问题
不是。1rem的基准是根元素（<html>）的font-size，只有在浏览器默认值16px的情况下才等于16px。如果CSS修改了根元素的font-size，或者用户在浏览器中调整了默认字号，实际换算出的px值就会变化。
rem始终以根元素（<html>）的font-size为基准，无论嵌套多少层都保持一致。而em以“当前元素的父元素font-size”为基准，元素嵌套越深，实际大小越容易偏离预期。
使用rem可以让文字大小随用户在浏览器或系统辅助功能中调大字号而同步放大。如果固定使用px，这种放大设置就不会生效，对视力较弱的用户不够友好。
将设计稿中的px值除以项目实际的根元素font-size（默认16）即可得到rem值。如果项目将根元素font-size改成了其他数值，请先在本工具的基准值栏中输入该数值再进行换算，结果才会与实际CSS一致。
闲话 ― rem单位是如何被纳入CSS规范的
rem单位大约在2011年前后被纳入CSS Values and Units Module规范。在此之前，几乎所有网页都只用px或em来设置文字和间距大小，而em有一个广为人知的麻烦：由于它以父元素的font-size为基准，元素嵌套越多，实际大小就越容易在复杂布局中偏离预期。
rem正是为了解决这个问题而设计的：它始终引用同一个基准——根元素，无论元素嵌套多深，计算结果都不会偏移。在Internet Explorer 9尚不支持rem的年代，开发者常常先写一行px作为兼容写法，再补一行rem（font-size: 16px; font-size: 1rem;）。等到2010年代中期各大浏览器普遍支持rem后，这种兼容写法才逐渐不再必要。
如今，围绕rem统一构建整站的字号与间距体系已成为无障碍设计的常见做法：当访问者调大浏览器字号时，整个页面能够平滑地放大而不会错位或被裁切。WCAG（Web内容无障碍指南）等规范也明确建议不要仅依赖固定单位来设定文字大小。