背景:css
px:像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓,但是在移动端,由于手机分辨率种类颇多,不可能一个个去适配,这时px就显得很是无力,因此就要考虑em和rem。html
em:继承父级的。假设html的font-size默认为16px,body字体大小定义为50%,那么在body里字体大小就是1em=8px了。可当你又定义了一个div,而后把字体设置成了50%,请问,如今div下的1em等于多少?由于继承了父级的值,如今这个div里的1em=4px,这么嵌套下去的话,抱歉,我数学很差!因此不建议用em。css3
rem:是em的升级版,rem只会相对html的值,不会受到父级的影响,这样的好处在于:从em里的例子来说,1rem始终会等于8px。使用的时候不须要从新计算rem此时的大小。rem由于是css3增长的,因此ie8或如下请无视(始终想不明白,为何国人至今对微软都放弃的ie这么依依不舍)。字体
以上也算是讲清了他们之间的区别和关系,rem更多的运用于移动H5页面的适配使用。htm