PX：px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
EM：em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸。
注意：em的值是不固定的，em会继承父元素的字体大小
REM：rem是相对长度单位，相对于根元素（即html元素）的font-size计算值的倍数。
嗯、先看看rem的兼容性，如下图。
rem是相对于根元素<html>的font-size,这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设为多少，由我们来定
我们知道，浏览器默认的字号是16px，如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。
注意：任意浏览器的默认字体都是16px。所有未经调整的浏览器都符合1rem=16px
所以假定我们让一个div的宽度为2em,那么把它换算成px，width：32px，同理，假如一个设计稿为宽度48px，高度为60px，则换算成rem就是width=48/16=3rem,height=60/16=3.75rem
当然如果我们在css中设置了html根元素的font-size的值，如下所示（为了方便计算，时常将在<html>元素中设置font-size:值为62.5%,也就是16*62.5%=10px）
html{font-size:10px}
那么后面的css里面的rem值就以1rem =10px来换算
所以假定我们让一个div的宽度为2em,那么把它换算成px，width：20px，同理，假如一个设计稿为宽度48px，高度为60px，则换算成rem就是width=48/10=4.8rem,height=60/10=6rem
2197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
