文章目录
  1. 1. 普遍原理
  • em
    1. 0.1. 在当 em 和 px 单位混用时候
    2. 0.2. 都是 em 听谁的?
  • rem
    1. 1. 使用 em 和 rem
      1. 1.1. 总结
      2. 1.2. 62.5%
        1. 1.2.1. 参考
  • 普遍原理

    em 是相对于文本字体大小来度量的;rem 则是相对于 html 元素根节点的大小来度量的.

    em

    在当 em 和 px 单位混用时候

    • p元素与h1元素平级 => em 参照 16px 计算
    1
    2
    <h1>这是一段文字</h1>
    <p>这是第二段文字</p>
    1
    2
    3
    4
    5
    6
    h1 {
    font-size: 20px;
    }
    p {
    font-size: 2em; /*2em = 32px*/
    }
    • p 元素与 h1 元素被 div 包含=》按照 div
    1
    2
    3
    4
    <div>
    <h1>这是一段文字</h1>
    <p>这是第二段文字</p>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    div {
    font-size: 18px; /*1em = 18px*/
    }
    h1 {
    font-size: 20px;
    }
    p {
    font-size: 2em; /*2em = 36px*/
    }
    • html 结构不变,为 html 添加 font-size 属性,甚至!important=>div

      证明与 rem 单位不一样,不听从 html 根节点的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    html {
    font-size: 16px;
    }
    div {
    font-size: 18px; /*1em = 18px*/
    }
    h1 {
    font-size: 20px;
    }
    p {
    font-size: 2em; /*2em = 36px*/
    }

    都是 em 听谁的?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    h1 {
    font-size: 2em; /* 1em = 16px */
    margin-bottom: 1em; /* 1em = 32px */
    }

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

    上述 h1 和 p 的 margin-bottom 都是 1em,但是外边距的结果值却不相同。上述现象的出现,是因为em 是相对于当前元素字体的大小。由于 h1 中字体大小设置为 2em,因此 h1 中其他属性的 1em 值就是 1em=32px.

    rem

    1
    2
    3
    4
    5
    6
    7
    8
    h1 {
    font-size: 2rem;
    margin-bottom: 1rem; /* 1rem = 16px */
    }
    p {
    font-size: 1rem;
    margin-bottom: 1rem; /* 1rem = 16px */
    }

    1rem 总是等于 16px(除非 html 根元素字体大小改变)

    使用 em 和 rem

    总结

    究竟是该使用 em 还是 rem 呢?答案应该是结合使用 em 和 rem。当属性值的大小需要根据当前元素字体尺寸缩放时,就选用 em,其它的情况都使用更简单的 rem。

    62.5%

    常用字体值表示 rem(基本字体尺寸为 16px)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10px = 0.625rem
    12px = 0.75rem
    14px = 0.875rem
    16px = 1rem (base)
    18px = 1.125rem
    20px = 1.25rem
    24px = 1.5rem
    30px = 1.875rem
    32px = 2rem

    通过 62.5%的设定,就可以很容易用 em 或者 rem 来定义具体属性的尺寸了(10 倍的关系)。

    em

    1
    2
    3
    4
    5
    6
    7
    8
    9
    body {
    font-size: 62.5%;
    } /* =10px */
    h1 {
    font-size: 2.4em;
    } /* =24px */
    p {
    font-size: 1.4em;
    } /* =14px */

    rem

    1
    2
    3
    4
    5
    6
    7
    8
    9
    html {
    font-size: 62.5%;
    } /* =10px */
    body {
    font-size: 1.4rem;
    } /* =14px */
    h1 {
    font-size: 2.4rem;
    } /* =24px */

    参考

    文章目录
    1. 1. 普遍原理
  • em
    1. 0.1. 在当 em 和 px 单位混用时候
    2. 0.2. 都是 em 听谁的?
  • rem
    1. 1. 使用 em 和 rem
      1. 1.1. 总结
      2. 1.2. 62.5%
        1. 1.2.1. 参考