CSS Relative Unit: rem & em


What

remem 都是 CSS 的「相對」單位。

兩者最大的差別在於

rem 是乘以「根」元素的 px 數值作為運算的結果,如果沒有設定「根」元素的數值,default 值就是 16px。

<html class="root">
    root
    <div class="child">
        child
        <div class="grandson">
            grandson
        </div>
    </div>
</html>
html.root {
  font-size: 20px;
}

.child {
  font-size: 2rem; /* 20px * 2 = 40px */
}

.grandson {
  font-size: 2rem; /* 20px * 2 = 40px */
}

em 是乘以「父」元素的 px 數值作為運算的結果,如果沒有設定「父」元素的數值,default 值就是 16px。

<div class="father">
    father
    <div class="child">
        child
        <div class="grandson">
            grandson
        </div>
    </div>
</div>
.father {
  font-size: 20px;
}

.child {
  font-size: 2em; /* 20px * 2 = 40px */
}

.grandson {
  font-size: 2em; /* 40px * 2 = (20px * 2) * 2 = 80px */
}

Why

為什麼要使用相對單位?使用 px 這種絕對單位不適合嗎?
remem 是為了解決響應式設計下,px 這種絕對尺寸不夠彈性的問題,使用相對單位的話,這樣只要在不同尺寸的螢幕上改變「根」或「父」元素的 px 數值,就可以改變所有子元素的單位數值,讓不同的螢幕都有好的呈現,而不用改動所有 CSS 的 px 數值大小。

How

既然 remem 都是相對單位,那我們要選擇使用哪一個?
「根」元素是所有「父」元素的最上層元素,所以秉持著「先動粗後調細」的原則,大多數情況下都會先在 root 的 html 元素上設定 font-size,在底下的所有子元素上設定 rem,如果有細節的樣式需要調整的話,才在父元素上設定 font-size,子元素加上 em 做更細微的調整。

以我工作上遇到的案例來說明的話
rem 會用於 RWD 的排版

<h1>title</h1>
<p>paragraph</p>
html {
   font-size: 12px;

   @media (min-width: 768px) {
      font-size: 16px ;
   }
}
h1 {
    margin-bottom: 2rem;
}

em 則是會用於調整 RWD 下 svg icon 或 logo 的細節

<sapn class="icon">
    <svg width="1em" height="1em">
        ...
    </svg>
</span>
.icon {
   font-size: 16px;

   @media (min-width: 768px) {
      font-size: 20px ;
   }
}

參考資料

CSS units for font-size: px | em | rem
PX, EM or REM Media Queries?

#css #rem #EM #RWD






Related Posts

【單元測試的藝術】Chap 9: 在組織中導入單元測試

【單元測試的藝術】Chap 9: 在組織中導入單元測試

[Day05]: Docker Network

[Day05]: Docker Network

焦糖幫你記ChatBot || Line Bot 實作

焦糖幫你記ChatBot || Line Bot 實作




Sponsored



Comments