CSS规范 - rem参考表
- 简介
- rem和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算，rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。IE9+、Firefox、Chrome、Safari、Opera 的主流版本都支持。
- 该单位在移动端运用较为广泛，尤其实在做弹性布局时，只要通过媒体查询或者javascript（屏幕尺寸/320*100）控制html字体百分比，一套代码就可以适配多种终端。
- 如果将html的font-size设置为100%，那么1rem就相当于16px，由此可以计算出各个像素对应的rem值（比如一个元素上边距是20px，那么rem值=20/16）。
- 参考表
-
| html字体百分比 |
rem值 |
对应像素值 |
| 37.5% |
0.375rem |
6px |
| 43.8% |
0.438rem |
7px |
| 50% |
0.5rem |
8px |
| 56.3% |
0.563rem |
9px |
| 62.5% |
0.625rem |
10px |
| 68.8% |
0.688rem |
11px |
| 75% |
0.75rem |
12px |
| 81.3% |
0.813rem |
13px |
| 87.5% |
0.875rem |
14px |
| 93.8% |
0.938rem |
15px |
| 100% |
1rem |
16px |
| 106.3% |
1.063rem |
17px |
| 112.5% |
1.125rem |
18px |
| 118.8% |
1.188rem |
19px |
| 125% |
1.25rem |
20px |
| 131.3% |
1.313rem |
21px |
| 137.5% |
1.375rem |
22px |
| 143.8% |
1.438rem |
23px |
| 150% |
1.5rem |
24px |