CSS 中的 rem 和 em 的區別（1）

摘要： css 個人接觸一段時間，自認為對一些 confusing 的地方比較清楚，但是上週當有同事問道 rem 和 em 具體的區別，以及他們都適合應用在什麼場景下，自己也回答含糊不清，所以蒐集一些資料從新回顧一下這部分知識。 首先我們要明確 em 和 rem 概念 他們都是相對單位，說道相...

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 並沒有變化。