rem:font size of the root element
指相对于根元素的字体大小的单位。
1rem等于根元素html的font-size,即只需要设置根元素的font-size,其它元素使用rem单位时,设置成相应的百分比即可。
px:相对于显示器屏幕分辨率而言的相对长度单位。在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem。
em:是继承父级的,假设html的font-size默认为16px,body字体大小定义为50%,那么在body里字体大小就是1em=8px了。当你又定义了一个div,然后把字体设置了50%,
请问,现在div下的1em等于多少?因为继承了父级的值,现在这个div里的1em=4px,这么嵌套下去的话,抱歉,我数学不好!所有rem就出现了。
rem:是em的升级版,rem只会相对html的值,不会受到父级的影响,这样的好处在于:从em里的例子来讲,1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。