CSS 長度單位：px, em, rem, vw, vh 該怎麼用？

常見的 CSS 寬度，除了 px 和 % 以外，你其實還可以使用其他不同的單位來做寬度或高度。這篇文章會介紹常用的 CSS 單位，並告訴你通常這些單位該用在哪裡。

常用的 CSS 單位

首先說明 px——px 就是像素（pixel）的縮寫，是一個絕對的單位。例如你可以用這樣的範例來寫一個寬度 200px、高度 300px 的矩形。

.rect {
  width: 200px;
  height: 300px;
}

% （百分比）則是相對單位，會繼承上層的值，例如你在一個寬度 200px 的矩形中設另一個寬度為 50% 的盒子，盒子的寬度就會是 100px；除了長度以外，不管是字體大小、角度（deg、rad），甚至時間單位（s）也都可以用百分比的方式繼承。

.rect {
  width: 200px;
  height: 300px;
  font-size: 16px;
}

.box {
  width: 50%;     // width: 100px
  font-size: 50%; // font-size: 8px
}

另外，網頁不只可以用來顯示在螢幕上，你也能把你的網頁「列印」出來。例如你在排版 A4 紙的大小，你可能會使用 cm、mm、in（inch）、pt（點）等單位。

.page {
    width: 210mm;
    height: 297mm;
}

.title {
    font-size: 18pt;
}

em、rem 相對字體寬度

em 就是字母「M」的發音，一個 Em 就是一個 M 的寬度（M 是英文字母中最寬的一個），句體來説，它會吃上層 font-size 的設定，例如

.father {
  font-size :16px;
}

.box {
  width: 1em;       // 16px
  height: 0.4em;    // 6.4px
  font-size: 1.2em; // 19.2px
}

而 em 會一直繼承上層，如果你有多個巢狀 div 都用 em 去決定字體大小，下面可能會算到亂七八糟。因此可以改用 rem 當作單位——rem 的 r 是 root 的意思，它會拿你網站的最上層元素（通常是 <body>）當作參考，例如

body {
    font-size: 18px;
}

.box {
    width: 1rem // 18px;
}

有趣的是，除了 em 是一個大寫 M 的寬度以外，還有一些好用的跟字體大小有關的單位，例如：

ex：一個小寫 x 的高度
ch：一個數字 0 的寬度
ic：一個全形文字的寬度

但是卻沒有相對的 rex、rch、ric 等單位可以使用。

vw、vh 相對可視範圍單位

vw 和 vh 則是 viewport width 和 viewport height 的縮寫。亦即整個視窗寬度的比例，例如：

width: 100vw;
height: 100vh;

就能確保這個東西滿版，不會有捲軸。

為什麼不用 height: 100% 呢？因為 % 是吃上層寬度，如果你想要讓這個元素是 100% 高度，你就得把 body 也設為高度 100%、html 也設為高度 100% 才行。

另外，也有 vmin 和 vmax 可以使用。如果你的螢幕寬度比高度大（想成手機拿橫的），vmax 的分母就會是寬度、vmin 的分母就會是高度；而如果你的螢幕高度比寬度大（手機拿直的），vmax 就會變成比較大的那個——高度、vmin 則會變成寬度。

為何要有相對單位？

現在手機、穿戴裝置、甚至 Electron 應用程式用的都是網頁。網頁的 a11y（accessibility）越來越重要，使用相對單位可以讓你的網頁在各種裝置、各種情境都能正常顯示，例如讓視障人士可以在它的閱讀器中調整他的字體大小，甚至是小螢幕手機可以計算 font-size 該怎麼顯示，閱讀起來才舒服。

何時該用哪個單位？讓我給你一些建議：

想要印成固定大小的 PDF 或紙張 → 使用 mm、cm、pt，當成 Word 來用就對了
想要設 border → 使用 px
想要設字體大小、padding/margin → 使用 rem 可以讓你固定比例又保持 a11y
跟視窗大小有關的排版→ 使用vw、vh、vmin、vmax