rem与px的转换-战雀笔记

rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。我们知道，浏览器默认的字号16px，来看一些px单位与rem之间的转换关系：

|  px  |  rem
------------------------
|  12  | 12/16 = .75
|  14  | 14/16 = .875
|  16  | 16/16 = 1
|  18  | 18/16 = 1.125

为了方便计算，时常将在<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

例如设定一个div宽度为3rem,高度为2.5rem.则它换算成px为width:42px.height:35px，同理，假如一个设计稿为宽度42px,高度为35px，则换成成rem，则是42/14=3rem，35/14=2.5rem。如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。