跳到主要內容

CSS 單位轉換

在瀏覽器本機一對一換算 px、rem、em、%、vw、vh、vmin、vmax、pt、pc、in、cm、mm、q、ex、ch 等 CSS 單位,並可設定根字級、EM 參照字級、視口與百分比參照。CSS 絕對單位採用固定比例 1in = 96px。

px
點擊切換單位

長度單位

字體/排版

視口單位

比例/百分比

rem
點擊切換單位

長度單位

字體/排版

視口單位

比例/百分比

CSS 單位轉換

快速開始

1
輸入數值並選擇來源單位
2
選擇目標單位,或用「交換」反向換算
3
視需要設定根字級、EM 參照、百分比與視口情境;EM 請使用該屬性實際採用的字級。
4
複製換算結果
5
切換視口預設來檢查 vw/vh

常見使用情境

用途

響應式佈局、設計到前端協作、跨密度/列印對照、樣式規範統一

使用建議

設定基準:根字級設為 16px 很常見,便於 rem ↔ px 心算
文字建議 rem:利於全域縮放與無障礙;元件內相對縮放可用 em
佈局估算可用 vw/vh/vmin/vmax:結合斷點與最小/最大值約束,避免極端拉伸
小數與取整:輸出保留合理精度,避免過長小數影響可讀性

轉換參數與情境

REM 基準(Root Font Size):決定 rem 與 px 的換算比例。Web 常用 16px(1rem≈16px)。當設計稿不是以 16px 為基準時,可暫時調整以快速估算。
EM 參照字級:請輸入該屬性實際使用的字級。em 通常依據目前元素的計算字級;用於 font-size 等字級相對屬性時,請使用父層字級。此參照也用於 ex/ch 近似估算,以及百分比參照選擇「字級」時的 % 換算。
% 參照:選擇「字級 / 寬度 / 高度」作為 % 的參考量。版面相關請選「寬度/高度」;排版相關(如行高)選「字級」。
斷點預設:行動/平板/桌面/大螢幕會同步設定視口寬高,便於在不同寬度下快速驗證換算。僅用於估算,不等同執行時的 media query。
視口寬高:用於 vw/vh/vmin/vmax 與 %(參照為寬/高)的換算。實際裝置還會受網址列、安全區與捲軸影響,少量偏差屬正常。
建議:1)16px 是常見的根字級與 EM 參照值,但應使用該屬性實際採用的字級;2)估算版面百分比時,請切換斷點進行驗證;3)這些控制項用於設計階段的估算,不能取代瀏覽器最終的 DOM/CSS 計算。絕對單位一律採用 1in = 96px。

限制與相容性

% 的參照會因 CSS 屬性、包含區塊與版面模式而異;本工具依所選字級/視口寬度/視口高度估算,不是真實父容器或 DOM 計算
此處的 ex/ch 是依 EM 參照字級進行近似估算;結果並非字體度量檢測,且會因字體與瀏覽器而異。
傳統 vw/vh/vmin/vmax 會受捲軸、網址列與安全區影響;本工具不計算 dvh/svh/lvh、vi/vb、安全區或容器查詢單位
CSS 絕對單位換算採用固定比例 1in = 96px。若要對應螢幕實體像素與列印尺寸,需使用本工具未提供的獨立裝置/列印工作流程。

隱私與安全

處理在瀏覽器中完成。輸入值、From/To 單位、各單位快取值、根字級、EM 參照字級、視口、百分比參照和斷點選擇可能保留在目前瀏覽器工作階段或瀏覽器儲存中。若你儲存工作區或啟用 WebDAV 同步,這些值可能依你的同步設定儲存。換算結果會根據目前數值、單位和情境設定重新計算,不會作為單獨結果儲存。本頁不抓取 URL,也不會將數值傳送到伺服器端換算。在共用裝置上,必要時請清除數值、設定和網站資料。

常見問題

4

可繼續使用這些相關工具,完成後續步驟。

所有工具處理都在您的瀏覽器本地完成。