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，下面通过实例进行讲解

        
标题
        

    
    

        

            
Lorem ipsum dolor sit amet.
            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate est, ut delectus obcaecati dolores vero necessitatibus suscipit debitis saepe facilis?
        
        

            
Lorem ipsum dolor sit amet.
            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate est, ut delectus obcaecati dolores vero necessitatibus suscipit debitis saepe facilis?
        
    

先写一个 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