像素轉換器
在任何 DPI 下將像素即時轉換為毫米、厘米和吋——直接在瀏覽器中完成。
96 DPI·96 DPI — CSS、瀏覽器、作業系統參考
轉換結果
- 100像素
- 26.46毫米
- 2.646厘米
- 1.0417吋
螢幕間尺
甚麼是像素轉換器?
像素轉換器可在你選定的 DPI 下,將數位像素與真實長度單位(毫米、厘米、吋)互相換算。CSS 像素預設以 96 DPI 計算,但列印工作會用 300 DPI,相片列印甚至可達 600 DPI——在不同的 DPI 數值下,相同的像素數會對應到差異甚大的實體尺寸。在四個單位的任一格輸入數值,選擇符合你情境的 DPI 預設,其餘三個單位便會即時更新。每個結果只需一鍵即可複製到剪貼簿。
如何使用像素轉換器
- 在輸入欄輸入你想轉換的數值——例如 100。
- 選擇你輸入的單位:像素、毫米、厘米或吋。
- 選擇 DPI 預設值——網頁用 96 DPI、列印用 300 DPI,或選擇「自訂」輸入自己的 DPI。
- 在下方結果面板閱讀其餘三個單位的轉換數值。
- 點擊任一結果旁的「複製」放入剪貼簿,或分享網址——你的輸入會以查詢參數保留。
誰會用像素轉換器
- 學生: 處理涉及像素轉毫米的數學和物理功課,以及電腦圖學課程中的螢幕解像度練習。
- 網頁與 UI 設計師: 在合適的參考 DPI 下,把實體稿件量度(毫米)轉換成 CSS 像素,用來設定圖示、留白與元件尺寸。
- 印刷設計師: 在送印之前,將 Photoshop 或 Figma 匯出的像素尺寸以 300 DPI 換算為毫米和吋。
- 攝影師: 由相機輸出計算實體列印尺寸(例如 4000 × 3000 px 在 300 DPI 下可列印為 13.3 × 10 吋)。
- 開發者: 對照產品或無障礙規格中指定的實體尺寸,驗證 CSS 像素數值是否正確。
為何選用本轉換器
- 四個單位(像素、毫米、厘米、吋)會在你輸入時即時更新。
- 五個內建 DPI 預設涵蓋常見情境——網頁 96 DPI、舊版 Mac 72 DPI、列印 150/300/600 DPI。
- 支援自訂 DPI,適用於非標準顯示器(Retina、高解像度螢幕)和特殊印刷流程。
- 可分享連結——你的數值、來源單位和 DPI 都會以查詢參數保留。
- 100% 在瀏覽器運行:無需註冊,結果面板無廣告,運算邏輯開源。
轉換器有多精確?
轉換器使用標準的每吋 25.4 毫米比例與你指定的 DPI,並以 IEEE 754 雙精度浮點計算。結果在浮點誤差範圍內準確(相對誤差 ≤1×10⁻⁶)。唯一可能造成實體誤差的因素是 DPI 數值本身——如果你的螢幕並非真正以假設的 DPI 運行,請先用 Screen Ruler 工具校準。
常見問題
- 甚麼是像素?
- 像素是數位顯示器或影像中最小的離散單位。它的實體尺寸並非固定——取決於螢幕的像素密度(DPI)。在 96-DPI 的網頁顯示器上,一個像素剛好是 1/96 吋(約 0.265 毫米);在 300-DPI 的列印上,一個像素則是 1/300 吋(約 0.085 毫米)。
- 甚麼是 DPI?為何重要?
- DPI(每吋點數)是像素與實體長度之間的換算因子。同樣是 100 px,在 96 DPI 下對應 26.46 毫米,但在 300 DPI 下只有 8.47 毫米。換算必須使用目標媒介的 DPI——螢幕、列印或匯出檔——結果才有實體意義。
- 如何將像素轉換為毫米?
- 將像素數除以 DPI 得到吋,再乘以 25.4 即得毫米:mm = (px / DPI) × 25.4。例如 100 px 在 96 DPI 下:100/96 × 25.4 ≈ 26.46 毫米。轉換器會即時為你完成這項計算。
- 網頁應使用 72 還是 96 DPI?
- 請使用 96 DPI。CSS、瀏覽器和作業系統自 1990 年代起就以每吋 96 個參考像素為標準。72 DPI 是早期 Apple 字體排印的遺產(一像素等於一個字體點),現時只有特定 Mac 時代的素材會用到——現代網頁工作一律以 96 DPI 為準。
- 列印應使用甚麼 DPI?
- 高品質的雜誌和書籍列印用 300 DPI;草稿打樣與大幅面作品用 150 DPI;只有相片列印、精細線條藝術或需要放大檢視的文字才用到 600 DPI。一般工作超過 300 DPI 只會增加檔案大小,在多數紙張上都看不出差異。
- Retina/HiDPI 螢幕會如何影響換算?
- Retina 與其他 HiDPI 顯示器會為每一個 CSS 像素渲染兩到三個實體像素。本轉換器預設以 CSS 像素計算,因此 100 CSS px 在 96 DPI 下對任何 HiDPI 螢幕都是正確的。如果你需要實體像素數,可乘以裝置像素比(瀏覽器中的 window.devicePixelRatio)。
- 為何我的網頁設計在 4K 顯示器上看起來變細?
- 多數作業系統會將 4K 顯示器以 150–200% 縮放執行,使 CSS 像素在視覺上接近 1080p 顯示器。如果縮放未啟用,相同的像素數會覆蓋更少的實體吋數,設計就會在實體上顯得較細。請在作業系統設定中調整 DPI 縮放,或改用 rem/百分比單位代替固定 px。
DPI 深入解析 — 一次選對數字
每一次像素到長度的換算只有一個公式:長度 = 像素 ÷ DPI。難點在於選對與輸出媒介相符的 DPI。選錯不會報錯,只會悄悄給出數學上正確、物理上錯誤的結果。下方預設覆蓋 95% 真實工作場景。
Web 工作 — 始終用 96 DPI
1990 年代末,CSS、瀏覽器和作業系統統一為每英吋 96 參考像素,至今未變。所有現代瀏覽器都將 1 CSS 像素視為 1/96 英吋,不論物理顯示器為何。Retina 與 4K 顯示器以更高物理密度渲染,但 OS 會把 CSS 像素縮放回 96 DPI 參考,所以你的數學保持有效。72 DPI 視作歷史遺產 — 僅當你從 OS X 之前的 Mac 拉取素材時才相關。
印刷工作 — 150、300 或 600 DPI
大部分雜誌、書籍和消費級相片印刷用 300 DPI。草圖打樣和大幅面工作可降至 150 DPI,因為觀看距離掩蓋了解析度損失;這能減半檔案大小,一米外仍顯銳利。僅當印刷品會近距離審視時才用 600 DPI — 精細線稿、技術繪圖、光面紙上的小字。超過 600 DPI 幾乎不會帶來可見質量提升,反而浪費磁碟空間。
Retina 與 HiDPI — 在 CSS 像素中工作
Retina 顯示器為每個 CSS 像素渲染兩到三個物理像素,但 OS 把這層隱藏在你的程式碼之外。佈局計算堅持用 CSS 像素 (96 DPI)。若需要實際物理像素數 — 例如交付應在每台裝置上保持清晰的點陣素材 — 執行時乘以 window.devicePixelRatio 並提供 @2x 或 @3x 變體。像素轉換器預設把輸入當作 CSS 像素;只有當你確實量度過某已知顯示器的物理像素密度時才勾選自訂 DPI。
常見轉換模式
某些像素值出現得太頻繁,值得記下來。下表展示 100 px、1000 px 和典型全高清寬度 (1920 px) 在四種最常見 DPI 值下的換算結果。
| 像素 | 96 DPI(網頁) | 150 DPI(草圖) | 300 DPI(印刷) | 600 DPI(相片) |
|---|---|---|---|---|
| 100 | 26.46 mm | 16.93 mm | 8.47 mm | 4.23 mm |
| 1000 | 264.58 mm | 169.33 mm | 84.67 mm | 42.33 mm |
| 1920 | 508.00 mm | 325.12 mm | 162.56 mm | 81.28 mm |
開發者實用提示
先在 DevTools 中驗證
信任換算之前,先在主控台輸入 window.matchMedia('(min-resolution: 96dpi)').matches 確認瀏覽器報告的是 96 參考 DPI。在正確配置的系統上回傳 true。若回傳 false,說明 OS 縮放或縮放層級非預設,換算需要調整。
始終以目標 DPI 匯出
Photoshop、Figma 和大多數設計工具預設按畫布 DPI 匯出。匯出前先把畫布 DPI 設為目標媒介 — 把 96 DPI 畫布按 300 DPI 匯出並不會真正上採樣影像,只是改寫元資料,結果以預期物理尺寸的三分之一印出。
校準螢幕以建立真值基準
若你的工作依賴物理精度 — 把手持物體對著螢幕量度、把圖示尺寸對齊到已知信用卡寬度 — 先開啟 Screen Ruler 工具用真實信用卡校準。你螢幕的實際 DPI 鮮少與規格表一致;校準能把換算錨定到物理現實。