PX 轉 REM 換算指南：打造完美響應式網頁的字級秘訣，告別死板的絕對單位

在網頁設計與前端開發的領域中，設定字體大小（Font Size）是最基礎卻也最容易被輕忽的環節。許多設計師與開發者習慣在 CSS 中大量使用 px（像素）這個絕對單位，因為它直覺、精準，在設計軟體（如 Figma）中標示多少，寫成程式碼就是多少。然而，當你的網頁需要在從 4 吋的手機螢幕到 32 吋的 4K 顯示器上流暢切換，或是當視障使用者在瀏覽器中將預設字體放大時，那些被 px 寫死的字級就會成為一場災難——版面破裂、文字重疊，或是字小到根本看不見。這就是為什麼現代前端開發強烈提倡使用 rem 這個相對單位。透過精確的 PX 轉 REM 換算，你不僅能打造出完美的響應式網頁（RWD），更能大幅提升網站的無障礙體驗（Accessibility）。本文將帶你徹底搞懂 rem 的運作原理，並教你如何利用 Formula Universe 的專業工具，無痛完成單位的轉換。

為什麼網頁排版必須捨棄 PX 改用 REM？

要理解 rem 的價值，我們必須先看清 px 的局限性。px 是一個「絕對單位」，這意味著如果你在 CSS 中設定一段文字為 16px，無論使用者用什麼設備觀看，它就是死死的 16 個像素高。這種缺乏彈性的設定，在多螢幕時代已經完全不合時宜。

前端開發者最常犯的字級設定誤區

在切版與設定 CSS 時，我們經常觀察到以下幾個導致網頁排版失敗的誤區：

1. 全面使用 px 導致維護噩夢：如果在一個大型網站中，所有的標題、內文、按鈕字級都用 px 寫死。當設計總監突然要求「把整個網站的字體都稍微放大一點」時，前端工程師必須去修改幾百行的 CSS 程式碼，這不僅耗時且極易出錯。
2. 忽視瀏覽器的預設字體設定：許多視力不佳的使用者，會將瀏覽器的預設字體從 16px 調大到 20px 甚至 24px。如果你的網站字級是用 px 寫死的，瀏覽器將無法覆蓋你的設定，導致這些使用者根本無法閱讀你的網站內容。這嚴重違反了無障礙網頁設計（WCAG）的規範。
3. 濫用 em 導致巢狀計算災難：有些開發者知道要用相對單位，但他們選擇了 em。em 是相對於「父元素」的字體大小。如果父元素是 1.2em，子元素是 1.5em，孫元素是 2em，這種層層相乘的「巢狀繼承」會讓最終算出來的字體大小完全失控，連開發者自己都不知道字到底有多大。

單位轉換後能改善什麼開發決策

將字級單位全面從 px 轉換為 rem，能為前端開發架構帶來革命性的好處：

• 實現「一鍵縮放」的全局控制：rem 的核心價值在於它只參考一個基準點（根元素）。這意味著，只要透過媒體查詢（Media Queries）在不同螢幕尺寸下微調根元素的字體大小，整個網站的所有字級、間距就會像魔法般自動按比例縮放，大幅減少 CSS 代碼量。
• 完美支援無障礙閱讀（Accessibility）：當使用者在瀏覽器設定中放大字體時，根元素的基準值會隨之改變，所有使用 rem 設定的元素也會跟著放大，確保每一位使用者都能獲得最佳的閱讀體驗。
• 設計與開發的語言統一：透過建立一套標準的 px 轉 rem 對照表，設計師在 Figma 裡依然可以用熟悉的 px 思考，而工程師在切版時能迅速轉換為 rem，兩者之間不再有溝通障礙。

核心概念與計算方式：解碼 REM 的相對魔法

要精準換算 rem，我們必須先搞懂這個單位到底代表什麼意思，以及它的計算基準在哪裡。

公式或判斷邏輯：什麼是 REM？

rem 是 Root EM 的縮寫。它是一個相對單位，永遠只相對於 HTML 文件的「根元素（Root Element，即 HTML 根元素 標籤）」的字體大小。

在絕大多數的現代瀏覽器中，如果使用者沒有特別去改設定，根元素的預設字體大小通常是 16px。

因此，換算公式非常簡單： 目標 REM 數值 = 目標 PX 數值 / 根元素的 PX 數值

舉例來說，如果瀏覽器預設字體是 16px：

• 你想要一個 24px 的標題：24 / 16 = 1.5rem
• 你想要一個 14px 的輔助文字：14 / 16 = 0.875rem

欄位解讀：REM 與 EM 的致命差異

在面試前端工程師時，最常被問到的問題就是：「rem 和 em 有什麼不同？」

• rem (Root EM)：永遠只看 HTML 根元素 標籤的臉色。不管這個元素被包在多深的 div 容器元素 裡面，1rem 永遠等於根元素的字體大小。這保證了全局的一致性。
• em：看「父元素」的臉色。如果一個 div 容器元素 的字體大小被設定為 20px，那它裡面的 1em 就是 20px。如果再包一層 1.5em，就會變成 30px。這種繼承特性雖然在製作特定模組（如按鈕組）時很有用，但在全局排版中非常容易失控。

什麼情況下 REM 換算結果會失真？

在使用 rem 時，有一個極為常見的陷阱會導致排版大亂：

• 粗暴地將 html 設為 font-size: 62.5% 的 Hack 做法： 早期為了方便心算，許多工程師會在 CSS 裡寫 html { font-size: 62.5%; }。為什麼是 62.5%？因為 16px × 62.5% = 10px。這樣一來，1rem 就剛好等於 10px，1.6rem 就是 16px。 這是一個非常糟糕的做法！ 這會覆蓋掉使用者的瀏覽器預設設定。如果一個弱視使用者把瀏覽器字體調成 24px，你的 62.5% 會硬生生把它縮小回 15px，完全破壞了無障礙體驗。正確的做法是保持根元素預設，直接用計算機算出小數點。

台灣情境數字案例：切版工程師的 RWD 挑戰

讓我們來看一個台灣前端工程師常見的真實情境。小陳正在負責將設計師小美的 Figma 稿件切成網頁。這是一個內容豐富的部落格網站。

小美在 Figma 裡標示的字級規範（基於桌機版）如下：

• 主標題 (H1)：32px
• 副標題 (H2)：24px
• 內文 (Body)：16px
• 註解小字 (Caption)：12px

小陳決定全面採用 rem 來切版，以應付後續的手機版縮放需求。他假設瀏覽器的根元素預設值為 16px。

情境設定與計算過程

小陳利用公式（目標 px / 16）將設計稿上的數值轉換為 CSS 程式碼：

設計稿字級 (PX)	換算公式 (PX / 16)	CSS 設定值 (REM)	手機版縮放效果 (若 html 改為 14px)
32px (H1)	32 / 16	2rem	2 × 14 = 28px
24px (H2)	24 / 16	1.5rem	1.5 × 14 = 21px
16px (內文)	16 / 16	1rem	1 × 14 = 14px
12px (註解)	12 / 16	0.75rem	0.75 × 14 = 10.5px

數字案例表格解析

透過將所有的 px 轉換為 rem，小陳獲得了一個擁有「全局縮放超能力」的排版架構。

當這個網頁在桌機上瀏覽時，一切都完美符合設計師 32px、24px、16px 的要求。 當切換到手機版時，小陳發現原本的 32px 標題在小螢幕上顯得太巨大了。如果他當初是用 px 寫死的，他現在必須寫一堆 Media Queries 把 H1、H2、內文一個個改小。

但因為他使用了 rem，他只需要在 CSS 裡加一行代碼：

@media (max-width: 768px) {
  html { font-size: 87.5%; } /* 將基準從 16px 縮小為 14px */
}

瞬間，整個網站的字體（如表格最右欄所示）都自動按比例縮小了！H1 變成了適中的 28px，內文變成了 14px。這不僅節省了大量的開發時間，更確保了各個字級之間的比例關係（Type Scale）不會因為縮放而跑掉。

如何使用 Formula Universe 的對應工具

在切版時，每次遇到 18px、22px 這種無法整除的數字，都要打開計算機算小數點，非常影響開發節奏。Formula Universe 提供了專為開發者設計的 PX 轉 REM 換算工具，讓你秒速取得 CSS 代碼。

輸入哪些資料

使用該工具時，操作非常直覺：

1. 確認基準值（Base Size）：系統預設為標準的 16px。除非你的專案有特殊規範，否則建議保持這個預設值。
2. 輸入目標數值：在 PX 欄位輸入設計稿上的字體大小（例如 24）。

如何解讀結果

工具會即時雙向換算：

• 精確的 REM 數值：你會立刻看到對應的 REM 值（例如 1.5rem）。許多工具還會貼心地提供一鍵複製按鈕，讓你直接貼入 VS Code 中。
• 反向驗證：如果你接手別人的舊代碼，看到一個 1.375rem，你可以把它輸入到 REM 欄位，工具會告訴你這在畫面上看起來是 22px，幫助你快速理解設計意圖。

建議下一步

取得換算數值後，建議你採取以下行動來優化前端架構：

1. 將 REM 應用於間距（Spacing）：rem 不只能用在 font-size 上。強烈建議將元素的 margin 和 padding 也改用 rem 設定。這樣當整體字級縮放時，元素之間的呼吸空間也會跟著等比例縮放，維持完美的版面平衡。
2. 建立 CSS 變數（CSS Variables）或 Sass/Tailwind 設定檔：不要在代碼裡散落著各種小數點。請將算好的 rem 數值定義為語意化的變數，例如 --text-xl: 2rem; 或 --spacing-md: 1.5rem;，這會讓你的代碼極具可讀性與可維護性。
3. 搭配 Clamp() 實現流暢排版（Fluid Typography）：如果你想追求更極致的響應式設計，可以學習使用 CSS 的 clamp() 函數，結合 rem 與 vw（視窗寬度），讓字體大小隨著螢幕寬度像水一樣無段式流暢縮放，連 Media Queries 都不用寫。

常見問題

為什麼我設定了 1rem，但在某些人的電腦上看字卻特別大？

這正是 rem 發揮作用的表現！這代表那位使用者在瀏覽器的「設定 > 外觀」中，將預設字體大小調大了（例如調成 20px 或 24px）。因為你使用了 rem，你的網頁尊重了使用者的設定並隨之放大。這在無障礙設計（A11y）中是非常正確且被鼓勵的行為。

我可以為了方便計算，把 html 的 font-size 設為 10px 嗎？

強烈不建議。 如前文所述，這種 font-size: 62.5% 的 Hack 做法會覆蓋掉使用者的瀏覽器偏好設定，破壞無障礙體驗。在現代開發中，借助 VS Code 的擴充套件（如 px to rem）或線上換算工具，計算小數點已經不再是痛點，請保持根元素的預設彈性。

什麼時候應該用 px，什麼時候應該用 rem？

• 必須用 rem：字體大小（font-size）、行高（line-height）、與文字排版相關的間距（margin/padding）。
• 可以用 px：極細微且不需要隨螢幕縮放的裝飾性元素，例如 1px 的邊框（border）、陰影偏移量（box-shadow），或是固定尺寸的小圖示（icon）。

Tailwind CSS 裡面的單位是 px 還是 rem？

Tailwind CSS 預設的間距與字級系統，全部都是基於 rem 的。例如 Tailwind 中的 text-lg 預設是 1.125rem（18px），p-4 預設是 1rem（16px）。這也是為什麼 Tailwind 能輕易打造出高質感響應式網頁的原因。

如果設計稿是用 iOS 的 pt 標示，該怎麼換算成 rem？

在網頁開發的語境下，iOS 設計稿上的 1pt（在 1x 解析度下）基本上可以等同於 CSS 中的 1px。因此，你可以直接將設計稿上的 pt 數值當作 px，輸入到工具中除以 16 來換算成 rem。

立即使用PX REM 轉換計算機 →