昨天才剛處理完 RWD，原本想說今天應該可以輕鬆一點。

結果打開 CSS，又看到一堆熟悉的東西：
css:

width: 300px;
width: 80%;
font-size: 1rem;
width: 50vw;

嗯……

每個都看過，每個也都用過。

但真的要自己選的時候，又會突然開始：

所以我現在到底該用哪一個？？？

明明都是在設定大小，為什麼還要分這麼多種？

CSS：因為每個人的工作不一樣啊。

好喔。

今天就來看看這幾位到底在忙什麼 XD

px：我說多大就多大！

先從最熟悉的 px 開始。
css:

.box {
  width: 300px;
  height: 100px;
}

這個應該算是平常最常看到的單位之一。

設定 300px，就是指定元素的寬度為 300 個 CSS 像素。

簡單、直接。

說好 300px，就是 300px！

不過昨天才剛學完 RWD，如果畫面本身比 300px 還窄，固定寬度就有可能讓內容超出容器。

所以 px 雖然好用，也不是每個地方都適合直接寫死。

不然手機版一打開，又要開始找誰害我爆版了 ==

%：不要問我多大，先看我爸是誰

再來換成百分比：
css:

.box {
  width: 80%;
}

這個就跟 px 不太一樣了。

假設父元素的內容寬度是 500px，那子元素的 width: 80% 就會是：
text:

500 × 80% = 400px

如果父元素變成 300px：
text:

300 × 80% = 240px

也就是說，子元素會跟著父元素的寬度變化。

爸爸家大，我就住大一點。

爸爸家小，我就自己縮一下 XD

不過百分比實際參考的對象，還是要看使用的是哪個 CSS 屬性。

像 width: 80% 通常是相對於包含區塊的寬度，不是所有 % 都一定照父元素的寬度計算。

rem：全家字體大小聽根元素的

再來是 rem。
css:

html {
  font-size: 16px;
}

.title {
  font-size: 2rem;
}

這時候：
text:

1rem = 16px
2rem = 32px

因為 rem 是根據根元素，也就是 html 的字體大小來計算。

如果根元素的字體大小改變，使用 rem 設定的尺寸也會跟著改變。

例如：
css:

html {
  font-size: 20px;
}

css:
.title {
  font-size: 2rem;
}

這時候標題就會變成 40px。

根元素一聲令下，大家一起調整尺寸。

不過實際做網頁時，也要記得使用者可能會調整瀏覽器的預設字體大小。

所以不一定每個人的 1rem 都會是 16px 喔！

em：我比較在意自己家裡的狀況

看到 rem，就順便來看看長得很像的 em。
css:

.parent {
  font-size: 20px;
}

css:

.child {
  font-size: 1.5em;
}

這時候子元素的字體大小會是：
text:

20 × 1.5 = 30px

因為用在 font-size 時，em 會參考父元素計算後的字體大小。

但是如果用在其他屬性，例如：
css:

.child {
  font-size: 1.5em;
  padding: 1em;
}

這時候 padding: 1em 會參考 .child 自己計算後的字體大小，也就是 30px。

蛤？

你不是說你看爸爸嗎？怎麼現在又看自己？？？

原來 em 的參考基準還會依照使用的屬性而有所不同。

難怪以前有時候改個字體大小，旁邊的間距也跟著一起變了 XD

vw、vh：我直接看整個視窗！

再來這兩位：
css:

width: 50vw;
height: 50vh;

vw 跟 vh 都是跟視窗大小有關的單位。

一般情況下：

• 1vw = 視窗寬度的 1%
• 1vh = 視窗高度的 1%

假設視窗寬度是 1000px：
css:

.box {
  width: 50vw;
}

方塊寬度就會是 500px。

如果視窗寬度縮小到 600px，方塊就會跟著變成 300px。

這跟前面的 % 不一樣。

% 可能需要看父元素有多寬。

但 vw 是直接參考視窗寬度。

爸爸多大我不管，我直接看整間房子有多大 XD

至於 vh，就很適合拿來處理跟視窗高度有關的版面。

不過手機瀏覽器的網址列、工具列可能會影響可見區域高度，所以實際使用時，也可以再認識 dvh、svh 這類動態視窗單位。

今天先不繼續挖坑了，不然又要多寫一篇 ==

所以到底什麼時候用哪一個？

整理完之後，我現在會先這樣想：

當然這不是說某個單位只能用在某個地方。

還是要看實際的版面需求。

例如昨天做 RWD 的卡片，就可以這樣寫：
css:

.card {
  width: 80%;
  max-width: 400px;
  padding: 1rem;
  margin: 0 auto;
}

讓卡片寬度可以隨著容器變化，但又不會在大螢幕上一直變寬。

順便把前幾天學到的 margin: 0 auto 也拿出來複習一下。

欸！

原來你們真的可以一起上班欸 XD

今天的小心得

以前寫 CSS，很多時候就是：
css:

width: 300px;
margin: 20px;
font-size: 16px;

反正看起來正常就好。

但今天重新整理之後，發現選單位其實也跟版面要怎麼變化有關。

不是 px 不好，也不是全部改成 %、rem 就一定比較厲害。

而是要先想：

我希望這個尺寸固定，還是跟著其他東西一起變？

想清楚這件事，再來決定要用誰。

不然 CSS 單位這麼多人，每次都隨便抓一個來上班。

難怪畫面一縮小就開始出事 XD

好啦，今天先到這裡。

Day 12，完成！

明天再看看要挑戰什麼，先不把進度寫死。