CSS 單位轉換
在瀏覽器本機一對一換算 CSS 單位,支援 px、rem、em、%、vw、vh、vmin、vmax、pt、cm、mm、q、ex、ch,並可設定根字級、父層字級、視口、DPI 與百分比參照。
像素
px
點擊切換單位
長度單位
字體/排版
視口單位
比例/百分比
相對根字級
rem
點擊切換單位
長度單位
字體/排版
視口單位
比例/百分比
CSS 單位轉換輸入數值並選擇來源單位選擇目標單位,或用「交換」反向換算需要時設定 rem/em/%/vw/vh 上下文複製換算結果切換視口預設來檢查 vw/vh
快速開始
1
2
3
4
5
常見使用情境
用途
響應式佈局、設計到前端協作、跨密度/列印對照、樣式規範統一
使用建議
設定基準:根字級設為 16px 很常見,便於 rem ↔ px 心算
文字建議 rem:利於全域縮放與無障礙;元件內相對縮放可用 em
佈局估算可用 vw/vh/vmin/vmax:結合斷點與最小/最大值約束,避免極端拉伸
小數與取整:輸出保留合理精度,避免過長小數影響可讀性
轉換參數與情境
REM 基準(Root Font Size):決定 rem 與 px 的換算比例。Web 常用 16px(1rem≈16px)。當設計稿不是以 16px 為基準時,可暫時調整以快速估算。
EM 基準(Parent Font Size):決定 em 與 %(參照為「字級」時)的換算。適合元件局部縮放:調整父層字級即可整體按比例變化。
% 參照:選擇「字級 / 寬度 / 高度」作為 % 的參考量。版面相關請選「寬度/高度」;排版相關(如行高)選「字級」。
斷點預設:行動/平板/桌面/大螢幕會同步設定視口寬高,便於在不同寬度下快速驗證換算。僅用於估算,不等同執行時的 media query。
視口寬高:用於 vw/vh/vmin/vmax 與 %(參照為寬/高)的換算。實際裝置還會受網址列、安全區與捲軸影響,少量偏差屬正常。
DPI(每吋像素):用於物理單位 pt/pc/in/cm/mm/q ↔ px 的換算。預設 CSS 估算基準為 96 DPI;自訂值僅作為列印/裝置估算,不代表瀏覽器最終版面計算。
建議:1)常用 16px 與 96 DPI 作為基準;2)版面百分比估算時配合斷點切換驗證;3)這些參數用於設計/溝通時的快速換算,並不取代瀏覽器在真實 DOM/CSS 上的最終計算。
限制與相容性
% 的參照會因 CSS 屬性、包含區塊與版面模式而異;本工具依所選字級/視口寬度/視口高度估算,不是真實父容器或 DOM 計算
ex/ch 在這裡按父層字級近似估算,不讀取字體度量、字形或瀏覽器 computed style,跨字體/瀏覽器可能不同
傳統 vw/vh/vmin/vmax 會受捲軸、網址列與安全區影響;本工具不計算 dvh/svh/lvh、vi/vb、安全區或容器查詢單位
物理單位到 px 使用配置的 DPI 估算;列印/高密設備仍需以實測或打樣驗證為準
隱私與安全
處理在瀏覽器中完成。輸入值、From/To 單位、各單位快取值、根字級、父層字級、視口、DPI、百分比參照和斷點選擇可能保留在目前瀏覽器工作階段或瀏覽器儲存中。若你儲存工作區或啟用 WebDAV 同步,這些值可能依你的同步設定儲存。換算結果由目前數值、單位和上下文設定重新計算,不會作為單獨結果儲存。本頁不抓取 URL,也不會把數值傳送到伺服器端換算。在共用裝置上,必要時請清空數值、設定和網站資料。
常見問題
rem 依據根字級,影響可控、利於全域放大;em 依據父層字級,適合元件內相對縮放
佈局與文字優先 rem 提升可近用性;圖示/邊框等細節允許使用 px 以保持像素對齊
行動端網址列/安全區與捲軸會改變視口度量,建議結合斷點與最小/最大值約束保護版面
需要設定 DPI(如 96/72/300);螢幕→印刷僅作估算,成品以打樣與 ICC 流程為準