REM vs EM

作者: mhy_web | 来源:发表于2017-08-27 15:46 被阅读33次

    网页字体排版的最佳实践之一就是使用相对单位,如rem和em.

    问题是,你应该使用哪一个呢?一直以来,rem支持者和em支持者之间都存在着争辩,认为应该使用自己支持的那个。

    在这篇文章中,你会找到我如何在rem和em之间做抉择.你也将了解rem和em到底是什么以及如何使用它们来构建模块化组件。

    什么是EM?

    EM 是字体排印的一个单位,等同于当前指定的point-size。-维基百科

    此语句在网页上并不能说得过去,因为我们不使用point-size.如果我们用point-size取代font-size的话,这句话就完全行得通。

    意思就是,如果存在一个选择器的font-size属性的值为 20px,那么1em=20px

    h1 { font-size: 20px } /* 1em = 20px */
    p { font-size: 16px } /* 1em = 16px */
    

    值,但这种情况的发生,纯粹是因为继承。**

    em单位可以被用来声明字体的大小。实际上,最佳做法是使用相对单位,如用em指定font-size。

    考虑如下代码:

    h1 { font-size: 2em }
    

    这里h1选择器的真正大小是多少呢?

    我们要根据<h1>的父元素来计算font-size。它的父元素是<html>,并且它的font-size被设置为16px。

    通过这种方式,我们可以计算出h1的值为32px,或者说2 * 16px.

    html { font-size: 16px }
    h1 { font-size: 2em } /* 16px * 2 = 32px */
    

    虽然也可以实现,但是这并不被认为是一个好主意,通过在<html>中设置font-size的像素值将影响用户浏览器所设置的值。

    取而代之,你可以使用percentage值,或者完全摒弃font-size。

    注意:如果你完全摒弃font-size,它的值将被默认为100%.

    html { font-size: 100% } /*这里的意思是默认值为16px*/
    

    对于大多数的用户(和浏览器),font-size的值为100%,就会默认为16px,除非用户通过浏览器设置来改变font-size的默认值。但是很少有人这么做。

    好了,让我们回到em。

    em也可以用来指定除了font-size的其它属性值。margin和padding属性也经常用em设置大小。

    这里是很多人开始对em的值产生困惑的地方。

    考虑下面的代码。<h1>和<p>元素的margin-bottom的值应该是多少?(假设<html>的font-size被设置为100%).

    h1 {
      font-size: 2em; /* 1em = 16px */
      margin-bottom: 1em; /* 1em = 32px */
    }
    
    p {
      font-size: 1em; /* 1em = 16px */
      margin-bottom: 1em; /* 1em = 16px */
    }
    

    你是不是很吃惊两种状况下的margin-bottom的1em值不同?

    这种现象的发生在于1em等同于它当前的font-size。因为<h1>中的font-size被设置为了2em。其他用在<h1>内的em来计算的属性,就为1em = 32px。

    在不同的代码中,1em就会有不同的取值,这就是经常迷惑人们的地方。如果你也是刚刚接触em,你也会产生迷惑。

    不管怎么说,这就是em.接下来,让我们认识rem。

    什么是REM?

    rem指根em。它的产生是为了帮助人们解决em所带来的计算问题。

    它是字体排版的一个单位,等同于根font-size。这意味着1rem等同于<html>中的font-size。

    考虑相同的用rem表示的代码。现在margin-bottom计算出来的值为多少呢?

    h1 {
      font-size: 2rem;
      margin-bottom: 1rem; /* 1rem = 16px */
    }
    
    p {
      font-size: 1rem;
      margin-bottom: 1rem; /* 1rem = 16px */
    }
    

    正如您看到的,无论您在哪里设置它,1rem的取值均为16px。

    这是十分可靠的,很容易去理解。

    这就是rem。一旦你知道了什么是em,就很容易去理解,你是不是也同意这个观点?

    现在让我们步入这篇文章的正题,rem 还是 em?

    REMs or EMs?

    这是极具争议的问题。

    一些开发人员完全避免使用rem,声称使用rem会使他们的组件缺少模块化。另外一些人则什么都使用rem,因为喜欢rem所带来的便捷。

    奇怪的是,在我的职业生涯中,我掉进了在不同的地方是使用rem或者em的陷阱中。我喜欢em帮助我完成模块化组件,但是讨厌它所带来的代码复杂性。我喜欢rem计算的便捷,但是讨厌他是我模块化组件的阻碍。

    事实证明。rem 和 em 均有各自的优缺点。应给根据实际情况来判断其使用方式。

    这里我有两个简单的规则:

    • 如果这个属性根据它的font-size进行测量,则使用em(当有属性需要用它的字体大小(font-size)进行大小声明时,这时em就相当有用。)
    • 其他的一切事物均使用rem.

    有一个比较普遍的误解,认为 em 单位是相对于父元素的字体大小。 事实上,根据W3标准 ,它们是相对于使用em单位的元素的字体大小。父元素的字体大小可以影响 em
    (默认情况下浏览器通常有字体大小 16px,但这可以被用户更改为从 9px 到 72px的任何值。)


    -根 html 元素将继承浏览器中设置的字体大小,除非显式设置固定值去覆盖。

    • 所以 html 元素的字体大小虽然是直接确定 rem 值,但字体大小可能首先来自浏览器设置。
    • 因此浏览器的字体大小设置可以影响每个使用 rem 单元以及每个通过 em 单位继承的值。

    • rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响,除非显式重写一个具体单位。
    • em 单位转为像素值,取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小,除非显式重写与一个具体单位。
    • rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
    • em 单位基于使用他们的元素的字体大小。
    • rem 单位基于 html 元素的字体大小。
    • em 单位可能受任何继承的父元素字体大小影响
    • rem 单位可以从浏览器字体设置中继承字体大小。
    • 使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
    • 在不需要使用em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
    • 使用rem单位,除非你确定你需要 em 单位,包括对字体大小。
    • 媒体查询中使用 rem 单位
    • 不要在多列布局中使用 em 或 rem ,改用%。
    • 不要使用 em 或 rem,如果缩放会不可避免地导致要打破布局元素。
    • 更多区别及配合使用请看原文实例。

    本文摘自这里

    扩展阅读

    何时使用 Em 与 Rem

    相关文章

      网友评论

        本文标题: REM vs EM

        本文链接:https://www.haomeiwen.com/subject/lxnbdxtx.html