px、em、rem 区别

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

一、px

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

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

二、em

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

三、rem

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

原文地址:https://www.cnblogs.com/Lyh1997/p/14233022.html