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 |
PX⇔REM 换算工具是什么
把 px 指定的尺寸换成 rem，或把 rem 换回 px。根元素（html）的 font-size 基准值可以自由更改，换算的结果随之呈现。
首先要弄清的是，rem 所依的是根元素的字号，而这个字号是使用者可以更改的。 浏览器设置里的「字体大小」若被调大，rem 指定的一切便随之放大——这正是 rem 的用意所在。因此，切莫在 CSS 里写下 html { font-size: 16px }。 如此一来便把使用者的设置压了下去，视力不佳者放大字体的路也被堵死了。若要动基准值，请用 % 或 rem 这类相对的写法。
其次，em 与 rem 的不同在于是否叠加。 em 以其所在元素的字号为准，故而层层嵌套时会不断相乘；rem 则始终只看根元素，无论套了多少层都不变。
还有一处易被绊住：媒体查询里的 em，其基准并非根元素的字号，而是浏览器的默认值。 纵然把 html 的字号改小，媒体查询的断点也不会跟着动。
使用的步骤
- 定下基准值 多数浏览器的默认值为 16px。 若不确定，保持 16 即可。
- 填入 px 或 rem 任一侧填入数值，另一侧即刻现出换算的结果。
- 复制 CSS 的写法 可把带单位的字符串直接取走。
- 查看对照表 常用的尺寸列成一览，便于逐一挑选。
用好本工具的小技巧
- 浏览器默认1rem等于16px，但视力较弱的用户可能会在浏览器中调大默认字号，使用rem可以让页面自动跟随该设置缩放。
- 媒体查询（@media）的断点通常习惯用px指定，而font-size、padding、margin等间距建议使用rem，这样在用户调整字号偏好时整体版式比例更容易保持协调。
- 有些项目会设置html { font-size: 62.5%; }，使1rem等于10px，方便心算换算（1.6rem等于16px）。可以在上方基准值栏输入10来体验这种换算方式。
- 一种常见约定是页面整体布局用rem，组件内部间距用em，这样组件在任何地方使用时都能跟随自身字号缩放。
这些场景会用到
把设计稿的数值落到 CSS 时
设计稿多以 px 交付。 基准值既定，便可机械地换成 rem。
统一既有项目的单位时
px 与 rem 混杂的代码，整理时可将此表置于手边。
更改根基准值以观察影响时
基准值一改，凡以 rem 指定之处尽数联动。 幅度可预先确认。
决定媒体查询的断点时
媒体查询的 em 不以根元素为准，而以浏览器默认值为准。 换算的前提本就不同。
这一领域的术语
- rem
- 以根元素（html）字号为基准的相对单位。无论嵌套多深，其基准始终不变。
- em
- 以所在元素字号为基准的相对单位。层层嵌套时会不断相乘。
- 根元素
- 文档最外层的
html元素。rem 的一切换算皆以它的字号为本。 - 浏览器默认字号
- 多数环境为 16px。使用者可自行更改，而这正是应予尊重之处。
- 以 px 指定 html 的字号
- 会压过使用者的设置，故应避免。 要动基准值，请用
%之类的相对写法。 - 媒体查询中的 em
- 不以根元素，而以浏览器默认值为基准。 改动 html 的字号，断点不会随之移动。
常见问题
闲话 ― rem单位是如何被纳入CSS规范的
rem单位最早出现在W3C于2006年9月发布的草案《CSS3 Values and Units》中。在它普及之前，几乎所有网页都只用px或em来设置文字和间距大小，而em有一个广为人知的麻烦：由于它以父元素的font-size为基准，元素嵌套越多，实际大小就越容易在复杂布局中偏离预期。
rem正是为了解决这个问题而设计的：它始终引用同一个基准——根元素，无论元素嵌套多深，计算结果都不会偏移。在仍需兼容不支持rem的Internet Explorer 8及更早版本的年代，开发者常常先写一行px作为兼容写法，再补一行rem（font-size: 16px; font-size: 1rem;）（IE9、IE10也只是部分支持，在font简写属性和伪元素中会忽略rem）。等到2010年代中期不再需要兼容这些旧版IE后，这种兼容写法才逐渐不再必要。
如今，围绕rem统一构建整站的字号与间距体系已成为无障碍设计的常见做法：当访问者调大浏览器字号时，整个页面能够平滑地放大而不会错位或被裁切。WCAG（Web内容无障碍指南）等规范也明确建议不要仅依赖固定单位来设定文字大小。