CSS 單位參考
所有工具
免費
瀏覽每個 CSS 單位——絕對（px、cm、pt）、字型相對（em、rem、ch）、視窗（vw、dvh）、容器查詢、格線（fr）、角度、時間和解析度——在可搜尋、可依類型篩選的參考中，附描述、「何時使用」說明和可直接複製的標記。在瀏覽器中、免費使用。
每個 CSS 單位的說明。一切都從內建參考在您的瀏覽器中執行——不向伺服器傳送任何內容。
沒有符合您搜尋的單位。
請嘗試其他單位或類別——例如 rem、dvh、fr 或 angle。
關於 CSS 單位參考
CSS 單位參考資料整理了 CSS 語言提供的每一種單位──總共 45 種──依類型分組：絕對單位如 px、cm 和 pt；相對於字型的單位如 em、rem、ch 和 lh；視口單位從 vw、vh 到較新的 svh、lvh 和 dvh；容器查詢單位如 cqw 和 cqi；網格專用的 fr 單位；以及角度、時間、解析度和百分比單位。
每張卡片提供的不僅是定義：以可複製的等寬字型顯示單位標記、完整名稱、所屬分類、其計算方式的白話說明，以及一則實用的「使用時機」提示，說明這個單位最適合用在哪裡──以及在哪些情況下改用其他單位會更好。
搜尋可比對標記、名稱與含義，因此 rem、viewport width 和 root 都能找到對應的單位，而類型標籤可將格線篩選為單一族群。一切都在你的瀏覽器中依內建參考資料運作，不會傳送任何內容到伺服器。
如何使用 CSS 單位參考
- 依標記、名稱或含義搜尋單位──例如 rem、viewport width 或 angle。
- 使用類型標籤，將格線篩選為 absolute、font-relative、viewport、container、grid、angle、time、resolution 或 percentage 單位。
- 閱讀每個單位的說明及其「使用時機」提示，以選出正確的單位。
- 點擊複製按鈕，為你的樣式表取得單位標記。
常見問題
字型大小以及任何應隨使用者偏好文字大小縮放的內容都應使用 rem──rem 追蹤根元素的字型大小，因此瀏覽器的無障礙設定能正常運作。對於必須在視覺上保持固定不變的內容（如細邊框線），則使用 px。
em 相對於目前元素本身的字型大小，因此巢狀元素會使數值層層疊加；rem 則始終相對於根元素，能提供可預期的結果。這也是為什麼 rem 已成為間距與字型比例的預設選擇。
行動瀏覽器會顯示或隱藏工具列，導致可視高度改變，而 vh 則固定於較大的版面尺寸。動態單位 dvh 會隨著工具列的移動追蹤實際可視高度，svh/lvh 則分別固定於最小和最大的狀態。
fr 依比例分配格線容器的剩餘空間：grid-template-columns: 2fr 1fr 會讓第一欄取得第二欄兩倍的剩餘寬度（扣除固定軌道與間距後）。它只存在於格線軌道定義中。
它們是相對於最接近的查詢容器（而非視口）來設定元素大小：cqw 是容器寬度的 1%，cqi 是其行內尺寸的 1%。它們讓元件能依所在的容器縮放，而不受螢幕尺寸影響。
是的。全部 45 種單位皆免費記載於一個完全在你瀏覽器中運作的頁面──無需註冊，也不會向伺服器發出任何請求。
需要協助？
使用此工具時遇到問題？請告訴我們的團隊。