CSS 長度單位：px, em, rem, vw, vh 該怎麼用？
常見的 CSS 寬度，除了 px 和 % 以外，你其實還可以使用其他不同的單位來做寬度或高度。這篇文章會介紹常用的 CSS 單位，並告訴你通常這些單位該用在哪裡。
常見的 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