CSS 中的 rem 和 em 的区别（1）

css 个人接触一段时间，自认为对一些 confusing 的地方比较清楚，但是上周当有同事问道 rem 和 em 具体的区别，以及他们都适合应用在什么场景下，自己也回答含糊不清，所以搜集一些资料从新回顾一下这部分知识。

首先我们要明确 em 和 rem 概念
他们都是相对单位，说道相对，那么就是需要相对对象。
em 的相对对象是其父级对象的 font-size 值 也就是父级 dom 的 font-size * em的值
rem 这里多一个 r ，其他相同也就是 r + em，这个 r 指明了这里相对对象只能是 root 也就是 html的 font-size，下面通过实例进行讲解

<header>
        <h1>标题</h1>
        <nav></nav>
    </header>
    <div class="wrapper">
        <div class="col-em">
            <h1>Lorem ipsum dolor sit amet.</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate est, ut delectus obcaecati dolores vero necessitatibus suscipit debitis saepe facilis?</p>
        </div>
        <div class="col-rem">
            <h1>Lorem ipsum dolor sit amet.</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate est, ut delectus obcaecati dolores vero necessitatibus suscipit debitis saepe facilis?</p>
        </div>
    </div>

先写一个 html 文件，dom 结构很简单，只是为了说明 em 和 rem 这两个单位。

@import "variables/variable.scss";

.wrapper{
    display: flex;
}

css 为了方便我用了 sass 来写，然后编译成为 css 来使用，没有什么特别的，如果大家不了解 sass 留言我可以分享 sass 的用法，如果您作为一个前端开发人员，还不知道有 sass 那么多少有些落伍了。

.col-em h1 {
  font-size: 2.5em; }

.col-rem h1 {
  font-size: 2.5rem; }

我们分别为 col-em 和 col-rem 指定了 font-size 这里值得说明一下，col-em h1 父级还没有指定 font-size 他会一直向上追溯到 html 节点默认的 font-size 16px。

下面是 sass 代码，结构很清晰吧

.col-em{
    h1{
        font-size: 2.5em;
    }
    p{
        font-size: 1em;
    }
}

001.JPG

运行代码看效果
所以看上去没有什么区别，因为他们都相对目标都是 16px, 都是 2.5 x 2.5em

rem

然后我们修改 col-em > h1 的父级 col-em 的 font-size 的值为 20px 这样由于 em 的相对对象是其父级 font-size

.col-em {
  font-size: 20px; }
  .col-em h1 {
    font-size: 2.5em; }
  .col-em p {
    font-size: 1em; }

002.JPG

所以在 em 这一侧 em 文字大小都增加了。

.wrapper {
  display: flex;
  font-size: 20px; }

.col-em h1 {
  font-size: 2.5em; }

.col-em p {
  font-size: 1em; }

如果我们将 .wrapper 中的 font-size 的值调大，会发现 em 随之改变，而 rem 并没有变化。

002.JPG