PX轉REM轉換器

PX轉REM轉換器會使用您專案實際採用的根字型大小，將像素值轉換為 rem 或 em 單位，也能反向轉換。貼上單一數值或整套字級比例後，您會得到轉換後的數字、保留原始像素值作為註解且可直接複製的 CSS 區塊、以真實比例呈現每個尺寸的刻度尺，以及預覽訪客提高瀏覽器字型大小時 rem 數值的變化。

PX 轉 REM 公式

像素與 rem 之間的轉換只需要一次除法——您唯一需要知道的是文件的根字型大小。

使用瀏覽器預設的16 px根大小時，結果就是 24px ÷ 16 = 1.5rem 和 1.5rem × 16 = 24px。如果您的樣式表設定了 html { font-size: 62.5%; }，根大小就會變成 10 px，同一個 24 px 也就等於 2.4rem。

PX 轉 REM 轉換表（16px 根字型大小）

rem 與 em：為什麼巢狀結構會改變一切

rem 是以根元素（html）為基準，因此在文件中的任何位置都代表相同的大小。em 則以父層元素的計算後字型大小為基準，因此相同的 em 數值在巢狀結構中會逐層累乘。以下圖解從 16 px 根大小開始，將同一個 1.5 倍數套用三層：

多數團隊最後採用的實用規則是：字型大小、版面間距和斷點使用 rem；對於應該隨自身元件縮放的內容，才刻意使用 em，例如按鈕內的 padding，或文字旁圖示的大小。

為什麼使用 rem 而不是 px？

• 無障礙性。訪客將瀏覽器預設字型大小設為 20 px 時，所有以 rem 為基礎的尺寸都會按比例放大。以 px 寫死的尺寸則會完全忽略這項偏好。
• 全域縮放的單一控制項。在媒體查詢中變更根字型大小，就能讓整套字級比例和間距節奏一起調整——不需要逐一覆寫元件。
• 一致的間距節奏。使用 rem 表示 padding 和 margin，能讓垂直節奏與字級比例綁定，而不是彼此逐漸偏離。
• 適合設計 token。現代設計系統（以及 Tailwind 的預設比例）都以 rem 發布尺寸，因此將既有 px 數值轉換後，交接工作會更容易。

62.5% 根字型大小技巧

許多團隊會加入這項規則，讓 1rem 等於整潔的 10 px，使心算轉換變得非常簡單：

html { font-size: 62.5%; }  /* 16px × 0.625 = 10px */
body { font-size: 1.6rem; } /* 回到易讀的 16px */

.card-title { font-size: 2.4rem; } /* 24px */
.card-body  { font-size: 1.4rem; } /* 14px */

由於 62.5% 是瀏覽器預設值的百分比，而不是固定的像素值，因此仍會尊重訪客的字型大小偏好。要記住的一點是，必須將 body 重設為約 1.6rem，否則預設文字會以 10 px 顯示。將上方的根字型大小欄位設為 10，即可依此設定進行轉換。

媒體查詢中的 rem

在媒體查詢中，rem 是以瀏覽器的初始根字型大小解析，而不是以您在 CSS 中設定的 html 字型大小解析。因此 @media (min-width: 48rem) 永遠是 768 px，即使您的樣式表宣告了 html { font-size: 10px } 也是如此。這讓 rem 斷點安全且可預測，也是 em 和 rem 行為相同的少數情況之一。

何時仍應使用 px

• 極細邊框和分隔線——1 px 邊框應維持 1 px；縮放後會產生模糊的子像素線條。
• 固定尺寸的資產——精靈圖偏移、精確的陰影偏移，以及具有已知固有尺寸的圖片。
• Canvas 和列印輸出——當您確實需要實體尺寸或裝置像素測量時。

如何使用此轉換器

1. 選擇方向：px → rem、rem → px、px → em 或 em → px。
2. 輸入數值：輸入一個數字，或使用逗號或空格分隔整套比例（每次最多 20 個）。像 24px 這樣的尾端單位也會被接受並忽略。
3. 設定根字型大小：瀏覽器使用預設值時保留 16，或點擊預設按鈕選擇 10（62.5% 技巧）、12、14、18 或 20。
4. 點擊轉換：查看轉換結果表、真實比例尺寸刻度尺、無障礙預覽和 CSS 區塊。
5. 複製 CSS：一個按鈕即可複製所有 font-size 宣告，並在註解中保留來源像素值。

常見問題

如何將 px 轉換為 rem？

將像素值除以根字型大小。以瀏覽器預設根大小 16 px 為例，24 px ÷ 16 = 1.5rem。反向轉換時，將 rem 值乘以根字型大小：1.5rem × 16 = 24 px。

1rem 是多少 px？

1rem 等於頁面的根字型大小。在預設為 16 px 的各大主流瀏覽器中，1rem 就是 16 px，除非 html 元素或訪客的瀏覽器設定有所變更。

rem 和 em 有什麼差別？

rem 永遠相對於 html 元素上的根字型大小，因此 1.5rem 在文件中的任何位置都具有相同大小。em 則相對於元素自身父層的字型大小，因此巢狀元素會逐層累乘：另一個 1.5em 裡面的 1.5em 會呈現為基準大小的 2.25 倍。

什麼是 62.5% 根字型大小技巧？

設定 html { font-size: 62.5%; } 會讓根大小從 16 px 變成 10 px，因此 1rem 等於 10 px，心算會變得非常簡單：24 px 就是 2.4rem。由於 62.5% 是相對值而非絕對像素值，它仍會隨訪客的瀏覽器字型大小偏好調整。

字型大小應該使用 px 還是 rem？

字型大小、間距和媒體查詢請使用 rem，這樣訪客提高預設瀏覽器字型大小時，版面會跟著放大。px 則保留給不應縮放的數值，例如極細邊框、單像素分隔線和某些陰影偏移。

rem 數值需要是整數嗎？

不需要。瀏覽器能正常處理小數 rem 數值，並在內部計算子像素大小。如果您偏好整潔的數字，可以選擇能均勻分割字級比例的根字型大小，例如 10 px 或 8 px，也可以使用本轉換器的小數精度選項。

rem 適用於 padding、margin 和媒體查詢嗎？

適用。只要 CSS 接受長度值，rem 就能用在任何地方，包括 padding、margin、width、gap 和 border-radius。在媒體查詢中，rem 是以最初的 16 px 根大小解析，而不是以您自訂的 html 字型大小解析，因此 48rem 斷點永遠是 768 px。

延伸資源

• CSS 長度單位 - MDN
• 字型相對長度 - W3C CSS Values