相对单位

相对单位就是相对于另一个长度的长度。 CSS 中的相对单位主要分为两大类：

  • 字体相对单位，他们都是根据 font-size 来进行计算的。常见的字体相对单位有：em 、 rem 、ex 、ch ；
  • 视窗相对单位，他们都是根据视窗大小来决定的。常见的视窗相对单位有 vw 、vh 、vmax 、vmin 。

    px

    rem

    rem 是基于 html 元素的字体大小来决定，而 em 则根据使用它的元素的大小决定。

如果没有对根元素设定字号的话， font-size: 1rem 的作用与 font-size: initial 相同。

em

em指的是相对于元素父元素的 font-size 。根据 CSS 的规定， 1em 等于元素的 font-size 属性的值。
如果当前对行内文本的字体尺寸未进行显式设置，则相对于浏览器的默认字体尺寸。
如果自身元素没有设置字体大小，那么就会根据其父元素的字体大小作为参照去计算，如果元素本身已经设置了字体，那么就会基于自身的字体大小进行计算。

百分比

rem vs em

em 和 rem 单位之间的区别是浏览器根据谁来转化成 px 值。
em 可能会继承任意一级父元素的字体大小。而 rem 时根据页面的根元素的字体大小来计算的。
当使用 rem 单位，他们转化为像素大小取决于根元素的字体大小，即 html 元素的字体大小。根元素字体大小乘以你 rem 值。例如，根元素的字体大小 16px ，10rem 将等同于 160px ，即 10 ✖ 16 = 160 .
当使用 em 单位时，像素值将是 em 值乘以使用 em 单位的元素的字体大小。例如，如果一个 div 有 18px 字体大小， 10em 将等同于 180px ，即 10 ✖ 18 = 180 .

参考文章：