前言

em 和 rem 都是相对单位，在使用时由浏览器转换为像素值，具体取决于你的设计中的字体大小设置。
如果你使用值 1em 或 1rem，它可以被浏览器解析成 从16px 到 160px 或其他任意值。

em 和 rem 的区别

em 和 rem 单位之间的区别是浏览器根据谁来转化成 px 值

em

em是继承父元素的大小

如果父元素的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。即1em=16px
整个页面的1em不是一个固定的值
父元素的字体大小为2em，那么子元素的em单位就是32px
层级越深，换算越复杂

rem

rem是继承html根元素的大小

当我们改变根元素下的字体大小时，下面的大小都会改变。
通过rem既可以做到只修改根元素就可以成比例的调整所有字体，又可以避免字体大小逐层复合的连锁反应。