初探相对单位 emrem

  • emrem 都是相对单位,由浏览器转换为像素值,具体取决于我们设计中的字体大小设置
  • 根 html 元素将继承浏览器中设置的字体大小,一般都为16px,除非显式设置固定值去覆盖
  • 没有设置 html 字体大小时,浏览器设置起作用
  • 当 em 单位设置在 html 元素上时,html元素字体大小将为 em 值乘以浏览器字体大小
  • 浏览器字体设置将影响 html 元素字体大小,html 元素字体大小直接确定 rem 的值,故浏览器的设置将会影响到 remem 的值

rem 单位如何转换为像素值

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

em 单位如何转换为像素值

  • 当使用em单位时,像素值将是em值乘以使用em单位的元素的字体大小。
  • 注意:是相对于使用 em 单位的元素的字体大小,不是父元素的字体大小
  • 父元素的字体大小可以影响 em 值,但是是通过继承

总结 rem & em 的差异

  • rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响,除非显式重写一个具体单位
  • em 单位转为像素值,取决于它们(使用 em 单位的元素)使用的字体大小。 此字体大小受从父元素继承过来的字体大小影响,除非显式重写与一个具体单位

何时使用 em 值,何时使用 rem 值呢?

  • 如果您确实需要更改 html 元素的字体大小,那么就使用em,rem单位(不要用固定值),这样根元素的值还会是用户浏览器字体大小的乘积。这将允许您通过更改您的 html 元素的字体大小,调整你的设计,但仍会保留用户的浏览器设置的效果
  • rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值
  • em 单位基于使用他们的元素的字体大小
  • rem 单位基于 html 元素的字体大小
  • em 单位可能受任何继承的父元素字体大小影响
  • rem 单位可以从浏览器字体设置中继承字体大小
  • 使用 em 单位应根据组件的字体大小而不是根元素的字体大小
  • 在不需要使用em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用rem
  • 使用rem单位,除非你确定你需要 em 单位,包括对字体大小
  • 媒体查询中使用 rem 单位
  • 不要在多列布局中使用 em 或 rem ,改用%
  • 不要使用 em 或 rem,如果缩放会不可避免地导致要打破布局元素