什麼是排版單位換算器？
排版單位換算工具可在像素（px）、em、rem、點（pt）、百分比（%）和視口單位（vw、vh）之間互相轉換。設定基準字級和視口尺寸，在任一欄位輸入數值，其餘單位立刻同步更新。
換算遵循 CSS 標準:1pt = 96/72 px,em 和 rem 是基礎字級的倍數,百分比把基礎字級當作 100%,vw 和 vh 是視口寬高的比例。在任一輸入框改數字,其餘六個欄位即時聯動。基礎字級預設 16px(常見的根值),也可改成 14、18 或設計系統約定的任何值,視口預設 1920×1080,讓 vw 和 vh 保持準確。
使用方法
- 步驟一 — 設定基準字級（預設 16px），此數值決定 em、rem 和百分比等相對單位的計算基準。
- 步驟二 — 在七個單位欄位（px、em、rem、pt、%、vw 或 vh）中任一欄位輸入數值，其他單位的值會即時更新。
- 步驟三 — 複製任意轉換後的數值，用於 CSS 樣式表、設計規格或印刷排版。
何時使用
- 把印刷設計師給的 pt 規格,轉成樣式表真正套用的 px 數值。
- 審計設計系統,看看 1.25rem 的標題在所選 root 下是不是真等於預期的 20px。
- 在已修改繼承字級的父層裡,挑選合適的 em 或 % 數值。
結果
設計師提供的規格使用點數（14pt 內文）。在 pt 欄位輸入 14 並將基準設為 16px，即可看到對應值為 18.67px、1.167em、1.167rem 和 116.7%，可直接用於樣式表。
常見問題
- 為什麼 1pt 換成 1.333px,不是 1px?
- CSS 定義 1pt 等於 1/72 英吋,1in 等於 96px,所以 1pt = 96/72 = 1.333px。所有瀏覽器都用此換算。pt 在螢幕上比數字看起來大,就是因為這 4/3 倍率。
- em 和 rem 有什麼差別?
- rem 永遠以根字級(<html> 元素)為基準,em 以最近父元素的字級為基準。所以 2em 放在字級 20px 的父元素裡是 40px,但 2rem 永遠是 2 × root,不管在哪一層父元素內。
- 基礎字級設定怎麼影響換算?
- 它決定 1rem 和 1em 對應多少 px。預設 16px 與大多數瀏覽器一致,所以 1rem = 16px。如果你的 root 是 18px,1rem = 18px,1.25rem 的標題就變成 22.5px 而非 20px。pt 不受影響,因為它是絕對單位。
- 樣式表中該用 px、rem 還是 em?
- 字級用 rem(使用者改瀏覽器縮放或無障礙設定時能跟著變)、邊框和微小間距用 px(要求精確)、按鈕內距等跟著當前元素字級的間距用 em。
- 為什麼 px 等於基礎字級時,百分比不是 100%?
- 其實就是 100%。如果 px 等於 base(例如 16、base 也 16),百分比欄會顯示 100。若顯示不是 100,要嘛 px 與 base 不完全相等(可能因其他欄位四捨五入),要嘛你輸入 px 後又改動了 base。