介绍

rem是跟随页面中<html>的单位，无论在页面中的任何位置，rem都是相对于(且仅相对于)<html>的，相较em、百分比(%)来讲，在页面中定义字号时使用rem会更加便于计算。

一般浏览器的默认字号为16px，那么默认的对应关系为：

px rem
12 12 / 16 = .75
14 14 / 16 = .875
16 16 / 16 = 1
18 18 / 16 = 1.125
20 20 / 16 = 1.25
24 24 / 16 = 1.5
30 30 / 16 = 1.875
36 36 / 16 = 2.25
42 42 / 16 = 2.625
48 48 / 16 = 3

很多时候为了方便计算，会为<html>设置一个更加便于计算的值，在元素中设置font-size值为62.5%(16 * 0.625 = 10)，或者直接设置为10px，在之后的设置中书写的基本为整数倍：

px rem
12 12 / 10 = 1.2
14 14 / 10 = 1.4
16 16 / 10 = 1.6
18 18 / 10 = 1.8
20 20 / 10 = 2
24 24 / 10 = 2.4
30 30 / 10 = 3
36 36 / 10 = 3.6
42 42 / 10 = 4.2
48 48 / 10 = 4

https://caniuse.com/#search=rem

应用

html {
  font-size: 10px;
}

input {
  font-size: 2rem; /*相当于 10 * 2 = 20*/
}

/*假设有 .a > .b > .c > input.d 嵌套的元素*/

.a {
  font-size: 2em;
}

.b {
  font-size: 1.5em;
}

.c {
  font-size: 0.8em;
}

input.d {
    font-size: 0.5em; /* 10 * 2 * 1.5 * 0.8 * 0.5 = 12 (大写的😓) */
    font-size: 1.2rem /* 10 * 1.2 = 12 */
}