CSS 單位轉換
在瀏覽器本機一對一換算 px、rem、em、%、vw、vh、vmin、vmax、pt、pc、in、cm、mm、q、ex、ch 等 CSS 單位,並可設定根字級、EM 參照字級、視口與百分比參照。CSS 絕對單位採用固定比例 1in = 96px。
px
點擊切換單位
長度單位
字體/排版
視口單位
比例/百分比
rem
點擊切換單位
長度單位
字體/排版
視口單位
比例/百分比
CSS 單位轉換輸入數值並選擇來源單位選擇目標單位,或用「交換」反向換算視需要設定根字級、EM 參照、百分比與視口情境;EM 請使用該屬性實際採用的字級。複製換算結果切換視口預設來檢查 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 參照字級:請輸入該屬性實際使用的字級。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,也不會將數值傳送到伺服器端換算。在共用裝置上,必要時請清除數值、設定和網站資料。
常見問題
rem 相對於根字級。em 通常依據目前元素的計算字級;用於 font-size 等字級相對屬性時,則依據父層字級。請將 EM 參照設為該屬性實際使用的字級。
佈局與文字優先 rem 提升可近用性;圖示/邊框等細節允許使用 px 以保持像素對齊
行動端網址列/安全區與捲軸會改變視口度量,建議結合斷點與最小/最大值約束保護版面
CSS px 換算採用 1in = 96px,並非螢幕到列印的實體換算。實體像素、印表機解析度、ICC/打樣與最終輸出,請使用獨立的裝置/列印工作流程。