CrateX.app 標誌

CrateX.app

CSS 單位轉換

在 px、em、rem、%、vw、vh 等 CSS 單位之間轉換，支援響應式中斷點

使用說明

🚀 快速開始

  • 輸入數值與單位：如 16 + px，或 1 + rem
  • 設定情境：為相對單位配置根/父字級、視窗尺寸與 DPI（影響 rem/em/vw/vh/pt/cm 等）
  • 查看結果：其餘單位會即時換算並可一鍵複製
  • 中斷點：切換行動/平板/桌面等預設視窗，檢視不同寬度下的換算

📌 常見使用情境

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

🧭 使用建議

  • 設定基準：根字級設為 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 改變，列印/高密度裝置需以實測為準

🔒 隱私與安全

  • 所有處理皆在您的瀏覽器內完成，資料不會離開您的裝置

❓ 常見問題

rem 與 em 有何差異？

rem 依據根字級，影響可控、利於全域放大；em 依據父字級，適合元件內相對縮放

應該用 px 還是 rem？

佈局與文字優先 rem 提升可近用性；圖示/邊框等細節允許使用 px 以保持像素對齊

為何 vw/vh 在不同裝置數值不一致？

行動裝置地址列/安全區與捲動條會改變視窗度量，建議搭配 clamp()/min()/max() 與中斷點保護

如何將螢幕像素換算為印刷單位？

需要設定 DPI（如 96/72/300）；螢幕→印刷僅作估算，成品以打樣與 ICC 流程為準

CSS Unit Converter - px em rem vw vh pt Calculator - CrateX.app