px
是个绝对单位,在指定字体大小和元素的宽高的时候使用
em
是个相对单位，em是参考当前元素的字体大小(font-size),
如果当前没有设置行内文本的字体尺寸，则相对于浏览器的默认字体尺寸，
在浏览器中默认字体尺寸为16px，换句话说所有未经调整的浏览器都符合1em=16px，100px=6.25em。
特点: 1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
rem
是CSS3中新增的一个相对单位,rem参考的是页面根元素html的字体大小(font-size)，
除了IE8及更早版本外，所有浏览器均已支持rem,
如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算,
假如我们在css里面设定 html{font-size:14px},那么后面的CSS里面的rem值则是以这个14来换算。如图(1)
为了方便计算，时常将在<html>元素中设置font-size值为62.5%: 相当于在<html>中设置font-size为10px,如图(2)
| px | rem | | px | rem |
------------------------- ------------------------
| 12 | 12/10 = 1.2 | | 12 | 12/16 = .75 |
| 14 | 14/10 = 1.4 | | 14 | 14/16 = .875 |
| 16 | 16/10 = 1.6 | | 16 | 16/16 = 1 |
| 18 | 18/10 = 1.8 | | 18 | 18/16 = 1.125 |
| 20 | 20/10 = 2.0 | | 20 | 20/16 = 1.25 |
| 24 | 24/10 = 2.4 | | 24 | 24/16 = 1.5 |
| 30 | 30/10 = 3.0 | | 30 | 30/16 = 1.875 |
| 36 | 36/10 = 3.6 | | 36 | 36/16 = 2.25 |
| 42 | 42/10 = 4.2 | | 42 | 42/16 = 2.625 |
| 48 | 48/10 = 4.8 | | 48 | 48/16 = 3 |
如图(2) 图(1)
px 与 rem 如何选择？
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem。
注意：Google浏览器默认最小字体为12px，可以在设置中更改。
