关于 em 和 rem

原文链接:http://caibaojian.com/rem-vs-em.html

当使用 rem 单位,他们转化为像素大小取决于页根元素的字体大小,即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。·

例如,根元素(html)的字体大小 16px,10rem 将等同于 160px,即 10 x 16 = 160。

当使用em单位时,像素值将是em值乘以使用em单位的元素的字体大小。·

例如,如果一个 div 有 18px 字体大小,10em 将等同于 180px,即 10 × 18 = 180。

总结

让我们以一个快速符号点概括我们介绍的内容:·

  • rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
  • em 单位基于使用他们的元素的字体大小。
  • rem 单位基于 html 元素的字体大小。
  • em 单位可能受任何继承的父元素字体大小影响
  • rem 单位可以从浏览器字体设置中继承字体大小。
  • 使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
  • 在不需要使用em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
  • 使用rem单位,除非你确定你需要 em 单位,包括对字体大小。
  • 媒体查询中使用 rem 单位
  • 不要在多列布局中使用 em 或 rem -改用 %。
  • 不要使用 em 或 rem,如果缩放会不可避免地导致要打破布局元素。

猜你喜欢

转载自www.cnblogs.com/chm-blogs/p/11486405.html