HTML中px，em，rem单位的区别

前言

现阶段，我们一般在布局页面的时候经常用到的单位是px，px是像素的意思，是具体的尺寸单位，就像我们平时用的米或者是厘米一样，除了px单位，还为我们提供了em单位和rem单位，而em,rem是倍数的意思，尺寸是相对的，这让我们在开发过程中有了更多的选择，使页面也变的更加灵活，一般在使用响应式布局或者移动端布局时用到的em或者rem单位比较多。

rem

rem是相对于根元素（也就是html元素）font-size的倍数。

我这里是以谷歌浏览器为例，谷歌浏览器的字体默认大小是16px，为了验证浏览器根元素的默认字体是16px，我将根元素的字体设置为16px

可以看到，取消的样式并没有对字体的大小造成影响
rem是相对于根元素（也就是html元素）font-size的倍数这句话是什么意思呢，请看下面代码

我将p标签的文字大小设置为3rem，在浏览调试的时候发现字体变大了，发现此时的字体大小为48px（紫色框框），也就是说在html根元素字体大小的基础上增加了三倍，也就是16px*3=48px。
通过这个例子，rem是相对于根元素（也就是html元素）font-size的倍数这句话也就不难理解了。

em

em是相对与它的父级元素font-size的倍数。
根据上面rem的介绍，em和rem相似，只是em是根据父元素进行倍数的增加。


子元素中的字体的大小为：30px*2=60px。

---

这里总结的是rem，em单位最基础的理解，它们还可以用来灵活布局移动端或者是响应式页面以及其他一些效果的显示，因为本人水平有限，能力一般，只能局限在现有的理解上。