什麼是 PX 轉 REM 換算器？
PX 轉 REM 換算器是一款能把像素（px）值換算成 rem 單位的工具。在 CSS 中，rem 是相對於根元素（root element）字級大小的單位。這項換算對於打造響應式、無障礙的網頁設計至關重要，能讓版面在不同螢幕尺寸與使用者偏好下都能正確縮放。
什麼時候會用到 PX 轉 REM 換算器
以下情況很適合使用 PX 轉 REM 換算器：
- 開發需要在各種裝置上等比例縮放的響應式網站時
- 製作尊重使用者字級偏好的無障礙設計時
- 將既有設計從絕對單位（像素）改為相對單位（rem），以提升日後維護的便利性時
如何計算 PX 轉 REM
像素轉 rem 的公式如下：
rem ＝ px ÷ 根字級大小
其中：
- rem 為換算後的 rem 單位數值
- px 為你想換算的像素值
- 根字級大小是根元素的基準字級（大多數瀏覽器預設為 16px）
範例
Advertisement
範例一：將標題尺寸從像素換算成 rem
以預設根字級 16px，將 24px 的標題尺寸換算成 rem。
| 輸入值 | 計算過程 | 結果 |
|---|---|---|
| 像素值：24px 根字級大小：16px |
24 ÷ 16 | 1.5rem |
範例二：以自訂根字級換算邊距值
以自訂根字級 20px，將 40px 的邊距換算成 rem。
| 輸入值 | 計算過程 | 結果 |
|---|---|---|
| 像素值：40px 根字級大小：20px |
40 ÷ 20 | 2rem |
範例三：換算較小的內距值
以預設根字級 16px，將 8px 的內距換算成 rem。
| 輸入值 | 計算過程 | 結果 |
|---|---|---|
| 像素值：8px 根字級大小：16px |
8 ÷ 16 | 0.5rem |
常見的像素轉 REM 對照
以下是常用像素值換算成 rem 的對照表（以標準 16px 根字級為基準）：
| 像素 | REM |
|---|---|
| 4 px | 0.25 rem |
| 8 px | 0.5 rem |
| 12 px | 0.75 rem |
| 14 px | 0.88 rem |
| 15 px | 0.94 rem |
| 16 px | 1 rem |
| 18 px | 1.12 rem |
| 20 px | 1.25 rem |
| 24 px | 1.5 rem |
| 25 px | 1.56 rem |
| 32 px | 2 rem |
| 40 px | 2.5 rem |
| 48 px | 3 rem |
| 56 px | 3.5 rem |
| 64 px | 4 rem |
| 80 px | 5 rem |
| 300 px | 18.75 rem |
使用 REM 取代像素的好處
Advertisement
在 CSS 中採用 rem 單位有以下幾項優點：
- 無障礙體驗更佳，因為 rem 會隨使用者瀏覽器的字級設定一起縮放
- 只要在媒體查詢（media query）中調整根字級，就能輕鬆達成響應式效果
- 所有元素的縮放更為一致
- 元素之間維持等比例關係，維護起來更輕鬆
相關計算器
你或許也會用到以下這些相關工具：
