css中em和rem是什么，有什么区别？

---

前言

在我们学习css的时候会遇到三种常见的长度单位：px、em、rem。px是像素，相信大家并不陌生，那em和rem又是什么，如何来区别呢？以下内容仅供参考，不作为专业讲解。

---

一、em是什么？

em是相对长度单位，其值并不固定，一般会继承父级元素的字体大小。任意浏览器的默认字体高都是16px，所有未经调整的浏览器都符合： 1em=16px。但如果父级设置了其他字体高度，那此时的1em就等于父级设置好的字体高度。

二、rem是什么？

rem是CSS3中新增的一个单位，目前移动开发使用也是最广泛的，同样，它也是一个相对单位，不过相对的是HTML根元素，和em不同的是，rem不用时时去关注父级的情况。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

三、em和rem的区别

rem与em都是相对单位，我们使用它们的目的就是为了适应各种不同的移动端和pc端的屏幕。

rem是根据html根节点来计算的，而em是根据父级元素的字体计算的。

简单概括就是：em相对于父元素，rem相对于根元素。