rem和em的区别

462 阅读1分钟

rem是基于html元素的字体大小来决定,而em则根据使用它的元素的字体大小决定(很多人错误以为是根据父类元素,实际上是使用它的元素继承了父类的属性才会产生的错觉)。rem和em是灵活的,浏览器会根据设置的字体大小,将它们转换为px单位。

chrome最小字体大小为12px,如果根据em计算出的字体小于12px时,取12px。

rem

  • rem是CSS3新增的一个相对单位,REM是相对单位,是相对HTML根元素。

    当使用 rem 单位,他们转化为像素大小取决于页根元素的字体大小,即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。 例如,根元素的字体大小 16px,10rem 将等同于 160px,即 10 x 16 = 160。

em

  • 子元素字体大小的em是相对于父元素字体大小。除非自身设置字体为px或vw,就不会继承父元素font-size。
  • 元素的width/height/padding/margin用em的话是相对于该元素的font-size。

哪些CSS属性会继承

css属性哪些可以被继承

本文部分内容来自以下文章

rem与em的使用和区别详解

css中单位em和rem的区别