概念

網頁可能會在任何尺寸的裝置上被瀏覽，要如何設定適合的行數或是字體大小才好閱讀？

例如： ch 這個單位，代表 0 這個字元的寬度，設定內容時會用 0 字元 寬當作基準來設定內容適合的大小

Numbers

在定義 opacity、line-height 或 color 時，所使用的 Numbers 本身是沒有單位的，可能是整數或是小數點。同時 Numbers 代表的數值會依所在的內文而定，例如：

p {
  font-size: 24px;
  line-height: 1.5;
}

line-height 指的是相對於字體 24px 的比例大小，而非一個特定值

Percentages

在 CSS 中使用百分比，必須清楚知道百分比是如何計算，例如：

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; 
}

假設 box-sizing: content-box，div 的 p 寬度 50% 會以父元素當基準，寬度為 150px

具有維度以後 ？

在 number 後面加上單位後，就具有維度，例如：1rem

1. 絕對長度

絕對長度的單位有：

• cm (Centimeters)
• mm (Millimeters)
• Q (Quarter-millimeters)
• in (Inches)
• pc (Picas)
• pt (Points)
• px (Pixels)

＊CSS 不只會使用在網頁內容的呈現，有時候也會用來設定印刷品的樣式做列印用，當設計印刷品樣式時就會需要用到絕對長度單位

2. 相對長度

根據一個基準值所計算出來的長度

字體大小相關的相對長度單位：

• cap：Capital letter：大寫字體高度
• ch：Character，一個數字 0 的寬度
• em：Element，相對於父元素的字體大小
• ex：X-height，一個小寫 x 的高度
• ic：International character，中日韓字集中，代表水的這個字元
• lh：Line height，行高

相對於根元素的字體：

• rcap：Root capital letter，(目前 Firefox 不支援)，
• rch：Root character(目前 Firefox 不支援)
• rem：Root element
• rex：Root x-height (目前 Firefox 不支援)
• ric：Root international character(目前 Firefox 不支援)
• rlh：Root element line height

相對於 viewport 長度單位：

• vw：Viewport Width
• vh：Viewport Height
• vi：Viewport Inline，文字書寫方向軸線的 1 %，取決於 writing mode
• vb：Viewport Block，文字區塊的方向軸線的 1 %，取決於 writing mode
• vmin：Viewport Minimum
• vmax：Viewport Maximum

參考資源

CSS-TRICKS - CSS Length Units