快速的本機 px 轉 rem 轉換器
這款雙向 px 轉 rem 轉換器能讓您輕鬆將靜態的像素數值，轉換為無障礙且可縮放的相對單位。無論您是要將設計稿轉換為程式碼，還是重構舊有的樣式表，都能立即計算出所需的精確 CSS 數值。
所有的計算都會在您輸入時即時完成。由於此工具完全在您的瀏覽器中本機執行，因此沒有任何載入時間或網路延遲。您可以順暢地將 px 轉換為 rem，或是反向將 rem 轉換為 px，雙手完全不需要離開鍵盤。
為什麼要將 px 轉換為 rem？
多年來，網頁開發者在設定字體大小、內距等各種屬性時，都習慣使用像素 (px)。然而，像素是絕對單位。如果視力不佳的使用者更改了瀏覽器設定，將預設文字放大（例如將標準的 16px 改為 24px），任何寫死為像素的文字都會忽略該設定，維持原本較小的尺寸。
透過使用 rem (root em) 單位，您的整個版面配置就能遵循使用者的設定。如果使用者調大預設字體大小，您基於 rem 設定的字體排版、外距和內距也會按比例放大。這能大幅提升網站的無障礙程度與響應式表現。使用 CSS rem 計算機可以省去轉換過程中的盲目猜測，讓您在編寫無障礙程式碼的同時，依然能精準符合設計團隊提供的像素尺寸。
CSS rem 計算機的運作原理
轉換的數學原理很簡單，但如果每次都要在腦海中重複計算，可能會拖慢你的工作流程。將像素轉換為 rem 的公式為：
目標像素 ÷ 基準字體大小 = Rem 值
預設情況下，幾乎所有網頁瀏覽器的基準字體大小都是 16px。如果你希望標題在標準螢幕上顯示為 32px，只要將 32 除以 16，就能得出 2rem。
如果你正在處理現有的程式碼庫，需要了解相對單位的實際顯示大小，可以使用本工具將 rem 轉換為 px。公式只需反過來：
Rem 值 × 基準字體大小 = 像素值
這款計算機支援雙向同步轉換。只要在任一欄位輸入數值，另一個欄位就會立即更新。它還會將複雜的小數四捨五入至小數點後第四位，在不犧牲精準度的情況下，保持 CSS 程式碼簡潔易讀。
使用自訂基準字體大小
雖然 16px 是網頁標準，但有些專案會修改根元素字體大小。在較舊的程式碼庫中，一個非常常見的作法是「62.5% 技巧」。開發者會在 CSS 中設定 html { font-size: 62.5%; }。因為預設 16px 的 62.5% 剛好是 10px，這會將基準字體大小變更為 10。
當基準為 10 時，計算就變得毫不費力：24px 就是 2.4rem，18px 就是 1.8rem，依此類推。如果你參與的專案使用了這個技巧，或是任何其他自訂的根元素大小，只需在計算機中更改 基準字體大小 的輸入值即可。本工具接受 1 到 100 之間的任何基準值，並會立即重新計算你目前的數值，同時更新整個對照表。
排版之外：間距與版面配置
雖然 rem 單位最常用於設定 font-size，但它們對版面配置屬性也同樣重要。現代 CSS 最佳實務建議在以下情況使用相對單位：
- 外距與內距： 確保元素間的空白能隨著文字放大而縮放，避免版面變得擁擠。
- 寬度與高度： 建立能隨著內部文字自然延伸的按鈕或輸入欄位。
- 媒體查詢： 使用
rem或em定義斷點，可確保版面配置是根據文字的實際大小來調整，而不單只是螢幕的實體寬度。
在建立複雜的 UI 元件時，您可以將此工具與 Box Shadow 產生器 搭配使用，打造出完全可縮放且具備無障礙特性的設計系統。當樣式表完成後，您可以使用 CSS 壓縮工具 來縮小檔案體積，以便部署到正式環境。
使用快速對照表
在標準的設計系統中，通常會重複使用相同的間距與字體級距。在主計算機下方，您會看到一個常見像素值（從 10px 到 64px）的對照表，這些數值已自動轉換為 rem 和 em 單位。
如果您更改了基準字體大小，此表格會即時更新。它是標準間距級距（例如 16、24、32 和 48 像素）的完美速查表，能省去您逐一將數值輸入計算機的麻煩。如果您需要轉換其他度量單位，也可以試試我們通用的單位轉換器。