rem与px之间的转换

rem与px之间的转换

最近一直在写app，那今天就说一下rem与px之间的转换。

rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。
所以这里总结一句，所谓依赖根元素来计算的方式，就是先给予html元素一个font-size，然后我们所有的rem就根据这个font-size来计算

例如：

html{ font-size:16px;}

那么我们这里的1rem就应该这么来计算：1x16=16px=1rem；浏览器默认为16px可能造成rem计算上的麻烦和多位小数，所以，我们也可以进行这种方式的初始化根元素：

html{
   font-size=62.5% //这里就是10/16x100%=62.5% 也就是默认10px的字号
}

这样初始化之后，我们来进行rem计算的时候，就会减少许多的麻烦。

下面是html根元素font-size为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%; /* 10 ÷ 16 × 100% = 62.5% */，也就是10px的对照表

px	rem
12	12/10 = 1.2
14	14/16 = .875
16	4/10 = 1.4
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

感谢阅读，希望能帮到您！