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