CSS 單位參考
免費線上CSS單位參考，按類別整理px、em、rem、%、vw、vh、vmin、vmax、ch等單位的用途與用法，並說明絕對單位與相對單位的換算關係和常見取值場景。 可在編碼時於一處快速查閱程式碼、符號、快速鍵等參考資訊，在瀏覽器中即時搜尋與複製，無需註冊或安裝即可免費使用。 結果可一鍵複製，整個過程簡單快捷，無需下載任何軟體，在手機和電腦上都能隨時流暢使用。
| 單位 | 名稱 | 類型 | 說明 | 範例 |
|---|---|---|---|---|
| px | Pixels | absolute | 螢幕上的一個像素。最基本的單位。 | font-size: 16px; |
| em | Em | relative | 父元素 font-size 的倍數。 | padding: 1.5em; |
| rem | Root Em | relative | 根元素（html）font-size 的倍數。 | margin: 2rem; |
| % | Percent | relative | 相對於對應父屬性的百分比。 | width: 50%; |
| vw | Viewport Width | viewport | 可視區域寬度的 1%。 | width: 100vw; |
| vh | Viewport Height | viewport | 可視區域高度的 1%。 | height: 100vh; |
| vmin | Viewport Min | viewport | vw 與 vh 中較小者的 1%。 | font-size: 5vmin; |
| vmax | Viewport Max | viewport | vw 與 vh 中較大者的 1%。 | width: 50vmax; |
| dvh | Dynamic VH | viewport | 動態可視區域高度（會計入行動裝置網址列）。 | height: 100dvh; |
| svh | Small VH | viewport | 最小可視區域高度。 | min-height: 100svh; |
| lvh | Large VH | viewport | 最大可視區域高度。 | max-height: 100lvh; |
| ch | Character | relative | 以「0」字元的寬度為基準。 | max-width: 60ch; |
| ex | X-Height | relative | 以「x」字元的高度為基準。 | line-height: 2ex; |
| cm | Centimeters | absolute | 公分。用於列印。 | width: 10cm; |
| mm | Millimeters | absolute | 公釐。用於列印。 | margin: 5mm; |
| in | Inches | absolute | 英吋（1in = 96px）。 | width: 2in; |
| pt | Points | absolute | 點（1pt = 1/72in）。 | font-size: 12pt; |
| cqi | Container Inline | container | 容器行內尺寸的 1%。 | font-size: 5cqi; |
| cqb | Container Block | container | 容器區塊尺寸的 1%。 | padding: 2cqb; |
19개 표시 중
嵌入
最後更新：2026 · 免費線上工具
什麼是 CSS 單位參考？
免費線上CSS單位參考，按類別整理px、em、rem、%、vw、vh、vmin、vmax、ch等單位的用途與用法，並說明絕對單位與相對單位的換算關係和常見取值場景。 可在編碼時於一處快速查閱程式碼、符號、快速鍵等參考資訊，在瀏覽器中即時搜尋與複製，無需註冊或安裝即可免費使用。 結果可一鍵複製，整個過程簡單快捷，無需下載任何軟體，在手機和電腦上都能隨時流暢使用。
使用方法
- 1輸入— 輸入所需資料。
- 2結果— 查看處理結果。
- 3複製— 複製結果使用。
相關工具
PX-REM 轉換器以可自訂的根字級為基準在CSS的px和rem單位間雙向轉換，支援小數值，並提供可複製的參考表和CSS程式碼片段的免費線上工具 適用於開發與資料處理時需要在 CSV、JSON、色彩、時間等不同格式之間轉換的情況，全部在瀏覽器本機完成，輸入資料不會上傳伺服器，無需安裝或註冊即可免費使用。 結果可一鍵複製，整個過程簡單快捷，無需下載任何軟體，在手機和電腦上都能隨時流暢使用。
瀏覽器相容性檢查免費線上瀏覽器相容性查詢工具，顯示某項CSS、JavaScript、HTML或Web API特性在Chrome、Firefox、Safari和Edge中的支援版本。 可在編碼時於一處快速查閱程式碼、符號、快速鍵等參考資訊，在瀏覽器中即時搜尋與複製，無需註冊或安裝即可免費使用。 結果可一鍵複製，整個過程簡單快捷，無需下載任何軟體，在手機和電腦上都能隨時流暢使用。
CSS 漸層產生器免費線上視覺化工具，設計linear、radial、conic漸層，調整顏色停止點和角度，一鍵複製網頁背景的CSS程式碼。 適合在測試與開發中即時產生所需數值，所有產生過程都在瀏覽器本機執行，資料不會上傳伺服器，無需安裝或註冊即可免費使用。 結果可一鍵複製，整個過程簡單快捷，無需下載任何軟體，在手機和電腦上都能隨時流暢使用。
CSS 盒子陰影產生器免費線上CSS box-shadow產生器，可調節偏移、模糊、擴散、顏色和內陰影inset並即時預覽陰影，產生可複製的box-shadow CSS代碼。 適合在測試與開發中即時產生所需數值，所有產生過程都在瀏覽器本機執行，資料不會上傳伺服器，無需安裝或註冊即可免費使用。 結果可一鍵複製，整個過程簡單快捷，無需下載任何軟體，在手機和電腦上都能隨時流暢使用。
常見問題
免費線上CSS單位參考，涵蓋所有CSS長度、角度、時間單位。
不會。所有處理都在瀏覽器中完成。
是的，響應式設計支援行動裝置。