在分析px,em,rem的区别前,我们首先要知道——所有浏览器的默认字体高度为16px。
1、px
px是指像素,相对于显示器屏幕分辨率,是固定的值。
2、em
em是相对父元素的长度单位。
当没有自己设定父元素,则默认相对HTML根元素,即1em = 16px。
为了计算方便,在使用 em 时,将父元素设置为10px,100px等更加方便计算,即 1em = 10px 或 1em = 100px 。当父元素字体大小改变,子元素字体大小随之改变。
3、rem
rem也是相对长度单位,但相对的是HTML根元素。
这使得 rem 比 em 使用更加简单,只需改变HTML根元素的字体大小,就可以成比例的调整所有的字体大小。
为了方便使用,将HTML根元素的字体大小设置为 html{font-size:62.5%} ,则16px × 62.5%=10px,即将浏览器的默认字体高度设为10px,此时 1rem = 10px , 1.2rem = 12px。