CSS 單位表示法：px、em、rem 與視窗單位怎麼選
CSS 提供數種不同的單位。有些適用於列印，有些則適用於螢幕或動畫，可以依最終輸出的媒體，來進行規畫使用。
- 長度:
- 列印:
cm、mm、in、pt、pc。 - 螢幕:
px、em、%、rem、vw、vh、vmin、vmax。
- 列印:
- 角度:
deg、grad、rad、turn。
- 時間:
s、ms。
- 比例:
fr。
長度
絕對單位
cm: 公分，等同於現實中的公分單位，通常用於需要列印的網頁。mm: 公釐，等同於現實中的毫米單位。in: 英吋，1 英吋等於 2.54 公分。pt: 點，1 點等於 1/72 英吋。pc: 派卡，1 派卡等於 12 點。px: 像素，螢幕上的基本單位，通常與設備解析度相關。
相對單位
em: Emphasize 的縮寫，指相對於當前或父元素的文字大小。例如：若當前元素文字大小為30px，則2em等於60px。若當前元素沒有設定文字大小，瀏覽器會一層一層往父元素上找，如果每一層都沒有，則使用瀏覽器預設值16px。rem: Root emphasize 的縮寫，指相對於根元素的文字大小（通常是<html>）。例如：若根元素文字大小為16px，則1rem等於16px。%: 相對於父元素的大小。例如：寬度設為50%時，表示寬度為父元素的一半。vw: View width 的縮寫，指100vw等於視窗的整個寬度。vh: View height 的縮寫，指100vh等於視窗的整個高度。vmin: View min 的縮寫，指視窗寬度和高度中較小邊的百分比。例如：若視窗寬度為1000px，高度為800px，則1vmin等於8px。vmax: View max 的縮寫，指視窗寬度和高度中較大邊的百分比。例如：若視窗寬度為1000px，高度為800px，則1vmax等於10px。
角度
CSS 提供多種角度單位，用於描述旋轉或方向。例如：transform 屬性中的旋轉或漸層的方向。
deg: 角度。例如：1 圈等於360deg。grad: 梯度。例如：1 圈等於400grad。rad: 弧度。例如：1 圈等於 2π 約6.2832rad。turn: 圈數。例如：1 圈等於1turn。
時間
s: 秒。例如：0.3s、.3s。ms: 毫秒。例如：300ms。
單位換算。
1 秒 = 1000 毫秒。
比例
CSS Grid 專用的單位，全名是 fraction。
fr: 在定義格線系統時，用來表示欄或列所佔據空間的比例單位。例如：2fr，再舉個例子，1fr 2fr就是將空間分割成 1/3、2/3 兩個大小。
選用建議
| 情境 | 建議單位 |
|---|---|
| 字級 | rem |
| 間距 | rem 或 px |
| 隨字級縮放的元件（如圖示、圓角） | em |
| 版面寬度 | %、max-width 搭配 rem |
| 滿版區塊 | vw、vh、dvh |
| 格線 軌道 | fr |
em 會層層累積
css
.a { font-size: 1.2em; } /* 父層 16px → 19.2px */
.a .b { font-size: 1.2em; } /* 再乘一次 → 23.04px */rem 一律以根元素為基準，不會有這個問題。
小提醒
行動瀏覽器的網址列會收合，vh 會跟著跳動。需要穩定的滿版高度時，改用 dvh 這類動態視窗單位。
常見問題
em 和 rem 差在哪？
em 以父層的字級為基準，層層巢狀時會不斷累積；rem 一律以根元素的字級為基準，結果穩定好預測。
字級為什麼建議用 rem？
使用者調整瀏覽器預設字級時，rem 會跟著等比放大，px 則不會。這對視力需求的使用者影響很大。
vh 在手機上怎麼一直跳？
因為行動瀏覽器的網址列會收合，視窗高度跟著改變。改用 dvh 這類動態視窗高度單位可以解決。
百分比是相對於誰？
看屬性而定。寬度相對於父層的寬度，但外距與內距的百分比一律以父層的 寬度 為基準，即使是上下方向也一樣。
