工具用的順手嗎?
你的回饋能幫助我們做得更好
為設計師和開發者提供的畫素(PX)與點(PT)單位換算工具,支援自定義PPI,用於字型排版與佈局適配。
概覽
了解工具能解決的問題、計算或處理邏輯,以及資料邊界。
預設密度為 96 時,16px 會換算成 12pt,反向輸入 12pt 也會得到 16px。計算器允許編輯 PX、PT 和標為“DPI”的密度數值,適合覈對網頁單位關係,也能按指定的每英寸畫素數估算柵格影象中的物理點數。這裏的關鍵不是先背一個固定倍率,而是先判斷 PX 屬於 CSS 長度,還是影象中實際存在的畫素數量。
PT(point,點)是排版長度單位,72pt 等於 1 英寸。PX 在 CSS 中是參考畫素單位;在點陣圖尺寸中,PX 又常指橫向或縱向的實際畫素個數。兩種語境都寫作 px,但是否需要自定義密度,答案不同:換算 CSS 宣告時採用固定的 96px/英寸關係;把點陣圖畫素對應到物理長度時,才需要目標影象的每英寸畫素數。
設密度輸入值為 D。頁面把“DPI”欄位中的數值直接代入每英寸對應多少畫素的換算關係,兩個方向的公式互為逆運算:
PX 轉 PT:PT = PX × 72 ÷ D
PT 轉 PX:PX = PT × D ÷ 72
72 來自 1 英寸等於 72pt;D 決定同一英寸中按多少個畫素計算。D 越大,同樣的 PX 數對應的 PT 越小;同樣的 PT 則需要更多 PX。主輸入結果最多顯示四位小數,頁面下方的常用 PX 對照值最多顯示三位小數,因此對照表與輸入框偶爾會呈現不同的小數位數,但使用的是同一組換算關係。
CSS 絕對長度單位之間採用固定比例:1in = 96px,同時 1pt = 1/72in。由此可得 96px = 72pt、1px = 0.75pt、1pt = 1.3333…px。這個 CSS 比例不隨手機、顯示器或印表機的硬體畫素密度改變,所以目標是把樣式表中的 px 與 pt 互換時,應保留預設密度 96。
指南
依步驟完成操作,並透過範例核對輸入與結果。
換算 CSS 數值時保留“DPI”為 96。若任務涉及點陣圖的目標物理尺寸,則填寫交付要求中的影象每英寸畫素數;雖然欄位顯示為 DPI,計算時該數字承擔的是每英寸畫素密度 D 的作用。
在“畫素 (px)”輸入框填寫數值,右側“點 (pt)”會給出換算結果。頁面下方還列出 8、12、14、16、18、20、24、32、48、64px 的快捷對照,選擇其中一個數值即可帶入當前密度。
直接修改“點 (pt)”輸入框,左側會按同一個密度反算 PX。兩個結果旁都可以複製當前數值,便於貼上到規格表或交付說明。
點選“重置”可恢復 16px 與密度 96,再從預設示例重新計算。對比多個密度時,先記錄原始 PX 或 PT,避免把上一次已經舍入的結果繼續當作新輸入。
網頁單位示例:把 PX 填為 16、密度保留 96,代入公式得到 16 × 72 ÷ 96 = 12pt。再把 PT 改為 12,反算為 12 × 96 ÷ 72 = 16px。這一組適合覈對 CSS 中常見的 16px 與 12pt。
影象密度示例:把密度改為 300,再輸入 48px,結果為 48 × 72 ÷ 300 = 11.52pt。若反向輸入 12pt,結果則是 12 × 300 ÷ 72 = 50px。兩個算例說明:原始數值不變而密度改變時,輸出也會改變,交付記錄必須連同密度一起儲存。
還可以用 144 作為一組整潔的核對值:24px × 72 ÷ 144 = 12pt,反向計算 12pt × 144 ÷ 72 = 24px。若頁面顯示值與手算不同,先檢查當前密度是否仍為上一組數值。
情境
查看這項工具在不同工作與生活流程中的用法。
前端開發者收到以 pt 標註的網頁排版規範,需要轉成 CSS px 時,可把密度保持為 96。例如規範中的 12pt 對應 16px;結果用於單位等價覈對,而不是測量顯示器上的實際毫米長度。
設計人員已知點陣圖的畫素尺寸和目標影象 PPI,希望把其中一段畫素長度換成排版點數時,可把該 PPI 數值填入密度欄位。交付時同時寫明 PX、PT 和密度,接收者才能復算。
團隊需要比較網頁稿與印刷版的數字規格時,可分別按 CSS 的 96 口徑和印刷影象的目標 PPI 計算。兩次結果並列記錄,可以避免把同一個“px”誤認為同一種物理長度。
問答
集中解答常見疑問與容易混淆的問題。
它取決於密度 D,通式是 1px = 72 ÷ D pt。按 CSS 的 96 基準計算,1px = 0.75pt;若 D 為 300,則 1px = 0.24pt。
可以。修改右側 PT 輸入框後,左側會按 PX = PT × D ÷ 72 反算;例如密度 96 時,9pt 對應 12px。
不是必然。這裏的 96 首先對應 CSS 規定的 px 與英寸固定關係,不等於對當前螢幕硬體密度的測量。換算 CSS 數值無需讀取裝置實際 PPI。
須知
使用前了解適用範圍、結果限制與必要提醒。
推薦
查找相關工具、專題與可用的 API 能力。