PXtoEM 線上轉換工具，快速將 PX 轉換成 EM 或百分比單位

在網頁設計時經常以 PX（Pixel）做為計算長度、寬度或是大小的單位，有些 WordPress 佈景主題則偏好使用 EM 或是 REM，後來去查了一下資料才知道 PX 是絕對單位、EM 和 REM（或是百分比 %）是相對單位，前者以子元素透過倍數乘以父元素的 PX 值、後者是每個元素透過倍數乘以根元素的 PX 值（參考資料：一次搞懂 CSS 字體單位：px、em、rem 和 %），當今推薦以 REM 為單位，可根據不同螢幕尺寸統一調整所有元件大小。

本文要介紹「PXtoEM」是一個線上轉換工具，可將 PX 轉換為 EM 或百分比單位，前面有提到 EM 和 REM 是相對單位，是以父元素 PX 值乘以倍數來獲得數值，舉例來說，如果父元素的 PX 值是 16px，那麼 20px 會對應 1.25em（也就是 16 乘以 1.25 倍得到 20），透過 PXtoEM 就能快速計算並且得出對應的單位數值。

PXtoEM 有一點舊了，本身沒有使用 SSL 協議，瀏覽時網址列會顯示不安全，不過不影響使用，此外，這工具還能產生基於 Normalize CSS、但經由 PXtoEM 修改後的 CSS 範例，讓開發者在開發上更輕鬆。

PXtoEM.com
http://pxtoem.com/

使用教學

STEP 1

開啟 PXtoEM 網站後有三個欄位，最左側的是當瀏覽器以 16px 為預設尺寸時的轉換模式，中間則是基於特定文字大小轉換出來的 EM 和百分比單位，從左邊點選基準文字大小、右邊就會換算出對應的 EM、百分比。

另外，最右側有一個自訂轉換、計算機功能，輸入基本的 Pixel（PX）數值，下方就能以 PX 或 EM 進行轉換並得出計算結果，非常方便。

STEP 2

右上角點選「Grab CSS」可取得一個 CSS 範本，基於 Normalize CSS、PXtoEM 修改後的版本。