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;
}
}
运行代码看效果
所以看上去没有什么区别，因为他们都相对目标都是 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; }
所以在 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 并没有变化。
