rem 是根元素<html>
中的一个相对单位,浏览器默认的字号是16px
,那么在这种情况下 16px = 1rem
默认情况(不改变html fontsize 属性时)常用的 rem 有
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%
相当于在<html>
中设置font-size
为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.0 |
24 | 24/10 = 2.4 |
30 | 30/10 = 3.0 |
36 | 36/10 = 3.6 |
42 | 42/10 = 4.2 |
48 | 48/10 = 4.8 |