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

PXtoEM

在網頁設計時經常以 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、百分比。

PXtoEM

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

PXtoEM

STEP 2

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

PXtoEM

值得一試的三個理由:

  1. 迅速完成 PX 轉 EM 或百分比單位的轉換,輕鬆應對網頁設計中不同單位的使用
  2. 透過這項工具更深入理解 EM 和 REM 相對單位換算的機制
  3. 亦可使用自訂轉換的計算功能,輸入特定 PX、EM 後得出對應的計算結果
分享本文
×