px、em、rem 区别

以前一直在用这几个单位，但是没有研究过这三个单位到底有啥区别，今天记录一下。

 

一、px

    px 代表像素。它是一个固定长度，px 是相对显示器的分辨率而言的，1px 相当于屏幕上的一个点，即屏幕分辨率的最小单位。

因为它是固定大小的，所以如果系统是兼顾大小屏幕的话，px并不是很友好。

 

二、em

    em 代表相对长度单位。他用来设置文本的字体尺寸。em 会继承父级元素的字体大小，相对于父级元素对象内文本的字体尺寸。如果当前文本对象内没有设置字体大小，那么它会相对浏览器默认的字体大小。

 

三、rem

    rem(root em) 是css3中新增的相对长度单位。它相当于 em 的一个改良版，em是相对父级元素字体大小，如果父级元素字体大小发生变化，那么em的大小又要重新计算。rem 则是相对于HTML根元素的相对字体大小。它可谓是集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。