PX:px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

EM:em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被设置,则相对于浏览器的默认字体尺寸。

注意:em的值是不固定的,em会继承父元素的字体大小

REM:rem是相对长度单位,相对于根元素(即html元素)的font-size计算值的倍数。

嗯、先看看rem的兼容性,如下图。

rem、em、px的区别,详细介绍rem与px的转换_px em 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