跳到主要內容
CrateX.app 標誌

CrateX.app

CSS 單位轉換

CSS 單位轉換

CSS 單位轉換支援 px、em、rem、%、vw、vh、pt 等單位換算，並提供斷點、字級、視口與 DPI 情境設定，適合響應式版面與前端還原。

像素
px
點擊切換單位

長度單位

字體/排版

視口單位

比例/百分比

相對根字級
rem
點擊切換單位

長度單位

字體/排版

視口單位

比例/百分比
CSS 單位轉換

快速開始

1
輸入數值與單位：如 16 + px，或 1 + rem
2
先選來源並輸入數值，再選目標；可用「交換」快速切換。
3
行動端：用抽屜右上角箭頭在來源/目標間切換。
4
選擇 rem/em/%/vw/vh 等時「設定」可用；絕對單位停用。
5
查看結果：其餘單位會即時換算並可一鍵複製
6
中斷點：切換行動/平板/桌面等預設視窗，檢視不同寬度下的換算

常見使用情境

用途

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

補充場景

px 轉 em、em 轉 px、vw 轉 px 也可在同一流程中完成，便於在複製、匯出或交付前快速核對結果。

使用建議

設定基準：根字級設為 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 與 %（當參照為「字型大小」）的換算。適合元件區域縮放：調整父字級即可整體按比例變化。
% 參照：選擇「字型大小 / 寬度 / 高度」作為 % 的參考量。佈局相關請選「寬度/高度」；排版相關（如行高）選「字型大小」。
中斷點預設：行動/平板/桌面/大螢幕會同步設定視窗寬高，便於在不同寬度下快速驗證換算。僅用於估算，非執行時的媒體查詢。
視窗寬高：用於 vw/vh/vmin/vmax 與 %（參照為寬/高）的換算。實際裝置上還會受地址列/安全區/捲動條影響，少量偏差屬正常。
DPI（每英吋像素）：用於實體單位 pt/pc/in/cm/mm/q ↔ px 的換算。Web 預設 96 DPI；列印/高密度裝置請依實際值設定，否則僅作近似估算。
建議：1）常用 16px 與 96 DPI 作為基準；2）佈局百分比估算時配合切換中斷點驗證；3）此處為設計/溝通時的快速換算，不取代瀏覽器在真實 DOM/CSS 上的最終計算。

限制與相容性

% 的參照因屬性而異（如 width/height/line-height ），本工具按常見約定估算
ex/ch 依據字形度量，不同字體/瀏覽器表現可能不同
視窗單位會受捲動條/地址列/安全區影響，實際值可能與設計稿略有出入
物理單位與 px 的換算隨 DPI 改變，列印/高密度裝置需以實測為準

隱私與安全

所有處理都在瀏覽器本地完成，目前內容可隨時替換、清空並重新處理。

常見問題

4

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