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

CSS 中的 rem 和 em 的区别（1）
这的注意一下 margin 的大小是根据当前 element 的 font-sizme 决定的

.col-em h1 {
  font-size: 3em;
  margin-bottom: 2em; }

也就是 margin-bottom = font-size(3em) * value(2) = 16px * 3 * 2

我们通过一个实际应用来分享一下我们具体应该如何使用 rem 和 em 单位，什么时候应该用 em 什么时候应该用 rem

我们这里通过按钮样式实践地为大家分享一下 rem 和 em 使用经验，这里定义了 3 按钮

<div class="btn-container">
        <button class="btn">按钮 1</button>
        <button class="btn">按钮 2</button>
        <button class="btn">按钮 3</button>
    </div>

然后给他们一个简单的样式，这的注意的是 padding 使用了 em 单位，这样可以保持我们 padding会随着 btn font-size 增大而增大不会显得特别别扭，当我们为 button 设置 margin 我们希望间距一致所以考虑用 rem 单位而不是 em 单位

.btn{
        border:none;
        background-color: deepskyblue;
        color: white;
        padding: 2em 3em;
        font-size: 1em;
      margin: 0 1rem;
    }

然后我们可以为 btn 添加两个不同样式

<div class="btn-container">
    <button class="btn">按钮 1</button>
    <button class="btn btn--small">按钮 2</button>
    <button class="btn btn--large">按钮 3</button>
</div>

例如我们添加两个不同 font-size 的样式到两个 button 上时候，我们就可以清楚了解上分享的内容。

..btn--small{
    font-size: .25em;
    background: deeppink;
} 
.btn--large{
    font-size: 1.25em;
} 

006.JPG