PX 轉 REM 轉換器
新依根字型大小在 px、rem、em 與 pt 之間轉換。
Browsers default to a 16px root. The 10px preset is the popular 62.5% trick, where 1rem maps to 10px.
| px | rem | copy |
|---|
Runs entirely in your browser. Nothing is uploaded.
px 轉 rem、rem 轉 px，即時雙向換算
這款 px 轉 rem 換算器可讓 px、rem、em 和 pt 依照您設定的根字體大小即時同步。編輯任一欄位，其他欄位立即更新——無論是從 Figma 設計稿的像素值轉換成可縮放的 rem 單位，還是反向從 rem 轉回 px，都不需要手動計算。這是一款快速、免費的 CSS 單位換算工具，完全在您的瀏覽器中運行，不上傳任何資料。
換算器下方的對照表列出了日常開發中最常用的 px 數值，點一下即可複製結果。更改根字體大小後，整張表格會立即重新計算，讓您輕鬆在 16px 專案與 10px（62.5% 技巧）專案之間切換。
px 轉 rem 公式說明
換算方式很簡單：rem = px ÷ 根字體大小。瀏覽器預設根字體大小為 16px，因此 16px = 1rem、24px = 1.5rem、40px = 2.5rem。反向換算：px = rem × 根字體大小，所以 0.875rem × 16 = 14px。由於換算器支援雙向輸入，您不需要記住換算方向——只要在您已知的欄位輸入數值，其他欄位會自動更新。
62.5% 技巧可以讓計算更簡單：在 CSS 中設定 html { font-size: 62.5%; }，將根字體大小改為 10px，rem 數值就能整齊對應 10 的倍數。1.6rem = 16px、2.4rem = 24px、3.2rem = 32px。切換到這裡的 10px 預設值，即可看到所有常用數值的對應關係。
px、rem 與 em 的差異
px 是絕對單位：16px 永遠是 16px。rem 相對於根元素（html）的字體大小，為整個頁面提供一個統一的基準。em 則相對於父元素的字體大小，在巢狀結構中會累乘——例如一個 1.2em 的段落放在 1.2em 的區塊內，結果是 1.2 × 1.2 = 1.44em；而 1.44rem 無論巢狀多深，都只是根字體大小的 1.44 倍。
工具中也顯示 pt（1px = 0.75pt），適用於印刷相關樣式。在 16px 根字體大小且無巢狀的情況下，16px、1rem 和 1em 完全相等——差異只有在父元素字體大小改變或使用者調整瀏覽器預設文字大小時才會顯現。
為何字體應使用 rem——無障礙設計的重要性
以 rem 取代 px 設定字體大小是一項實質的無障礙設計改善。當使用者在瀏覽器中增加預設文字大小（這對視覺障礙者或在高解析度螢幕上閱讀的使用者來說是常見需求），所有以 rem 設定的字體大小和間距都會等比例縮放。而 px 數值固定不變，可能導致文字相對容器顯得過小。
WCAG 2.1 準則 1.4.4 要求文字在不損失內容或功能的情況下可縮放至 200%。預設使用 rem 單位能讓達成此準則更加容易——當根字體大小改變時，整個字型比例尺和大部分間距都會隨之調整，維持版面比例。這也是 Tailwind CSS 等工具預設全面採用 rem 單位的原因。
常用 px 轉 rem 數值對照表
以標準 16px 根字體大小為基準：8px = 0.5rem、10px = 0.625rem、12px = 0.75rem、13px = 0.8125rem、14px = 0.875rem、16px = 1rem、18px = 1.125rem、20px = 1.25rem、24px = 1.5rem、28px = 1.75rem、32px = 2rem、36px = 2.25rem、40px = 2.5rem、48px = 3rem、64px = 4rem。
這些是 CSS 開發中最常輸入的數值。工具中的對照表列出了所有這些數值，點一下即可複製——比每次手動計算更快，也比背誦整張表更不容易出錯。將這款 rem 計算機加入書籤，每次需要將設計稿的像素規格換算為 CSS rem 單位時隨時取用。
私密、即時且免費——無需註冊
無需安裝，也無需註冊帳號。所有換算——px 轉 rem、rem 轉 px、px 轉 em、em 轉 px——都在您的瀏覽器中以 JavaScript 在本地端執行。您輸入的數值不會離開您的裝置，也不會傳送至任何伺服器。不像某些線上換算器需要建立帳號或觀看廣告才能查看結果，這裡的所有功能都能立即使用，沒有任何限制。
頁面載入後可離線使用，無使用次數限制，支援任何裝置——桌機、平板、iPhone 或 Android 手機皆可。將這款 px 轉 rem 換算器加入書籤作為日常 CSS 工具，省去每次將 Figma 設計規格轉換為可縮放 CSS 時的心算時間。
Frequently asked questions
px 怎麼換算成 rem？
將像素值除以根字體大小即可：rem = px ÷ 根字體大小。以瀏覽器預設的 16px 根字體大小為例：16px ÷ 16 = 1rem、24px ÷ 16 = 1.5rem、40px ÷ 16 = 2.5rem。在上方換算器中輸入任意 px 值，rem 欄位會立即更新——完全不需要心算。若使用 62.5% 技巧（根字體大小 10px），只需除以 10 即可：24px = 2.4rem。
rem 怎麼換算成 px？
將 rem 值乘以根字體大小即可：px = rem × 根字體大小。以預設 16px 根字體大小為例：1rem × 16 = 16px、1.5rem × 16 = 24px、0.875rem × 16 = 14px。在換算器中編輯 rem 欄位，px 欄位會立即跟著更新。換算器完全支援雙向輸入——輸入您已知的任何數值，其他欄位都會自動更新。
1rem 等於多少 px？
1rem 等於根元素（html）的字體大小。在所有主流瀏覽器——Chrome、Safari、Firefox、Edge——中，預設值為 16px，因此 1rem = 16px，除非根字體大小已被修改。若您將根字體大小設為 10px（62.5% 技巧），則 1rem = 10px。使用者也可以在瀏覽器設定中更改預設文字大小，這會改變他們的 1rem 等於多少 px——這正是 rem 比 px 更適合無障礙字體大小的原因。
0.875rem 是幾 px？
在標準 16px 根字體大小下，0.875rem = 14px（0.875 × 16 = 14）。這是 CSS 框架中最常用的 rem 值之一——Tailwind CSS 的 text-sm 類別就是 0.875rem（14px）。若使用 10px 根字體大小（62.5% 技巧），0.875rem 則等於 8.75px。
rem 和 px 有什麼區別？
px 是絕對固定單位——無論使用者設定或螢幕大小如何，16px 永遠是 16px。rem 是相對單位：它是根元素（html）字體大小的倍數，預設 1rem = 16px，但若使用者在無障礙設定中增加瀏覽器的基礎文字大小，rem 值會隨之縮放。這使得以 rem 為基礎的版面更具無障礙性——當使用者要求更大的文字時，文字會等比例放大；而以 px 設定的文字則固定不變，可能變得過小而難以閱讀。
px、rem 和 em 有什麼差別？
px 是固定值。rem 相對於根元素（html）的字體大小——為整個頁面提供一個統一的基準。em 相對於其父元素的字體大小，因此在巢狀元素中會累乘：若父元素為 20px，子元素設為 1.5em，子元素即為 30px。若將同一子元素改設為 1.5rem，則為 24px（1.5 × 16px 根字體大小），不受父元素影響。在 16px 根字體大小且無巢狀的情況下，16px、1rem 和 1em 完全相等——差異只有在父元素字體大小改變時才會顯現。
字體大小用 rem 還是 px 比較好？
從無障礙設計的角度來看，rem 更適合用於字體大小。當使用者增加瀏覽器的預設文字大小（這是視覺障礙者的常見需求），所有以 rem 設定的字體大小都會隨之縮放，而 px 值則固定不變。WCAG 2.1 準則 1.4.4（文字縮放）要求文字在不損失功能的情況下可縮放至 200%——使用 rem 讓達成此要求變得輕而易舉。px 僅適用於不應縮放的元素，例如 1px 邊框或固定尺寸的圖示。
CSS 的 62.5% 技巧是什麼？
62.5% 技巧是將根元素（html）的字體大小設為 62.5%——以瀏覽器預設的 16px 計算即為 10px。這讓 rem 的計算變得極為簡單：1.6rem = 16px、2.4rem = 24px、3.2rem = 32px。每個 rem 值都整齊對應 10 的倍數。在這裡切換到 10px 預設值，換算器和對照表會立即重新計算，讓您看到整齊的對應關係。此方法的代價是根字體大小會覆蓋使用者的瀏覽器預設值，稍微降低了無障礙性。
在 16px 預設值下，常用字體大小對應的 rem 值是多少？
以標準 16px 根字體大小為基準：10px = 0.625rem、12px = 0.75rem、13px = 0.8125rem、14px = 0.875rem、16px = 1rem、18px = 1.125rem、20px = 1.25rem、24px = 1.5rem、28px = 1.75rem、32px = 2rem、40px = 2.5rem、48px = 3rem。工具中的對照表列出了所有常用數值，點一下即可複製——比每次手動計算快多了。
px 轉 rem 換算在 Tailwind CSS 中如何應用？
Tailwind CSS 預設以 rem 作為大多數尺寸的單位，根字體大小為 16px。Tailwind 的間距比例：1 單位 = 0.25rem = 4px，因此 space-4 = 1rem = 16px、space-6 = 1.5rem = 24px、space-8 = 2rem = 32px。字體方面：text-sm = 0.875rem（14px）、text-base = 1rem（16px）、text-lg = 1.125rem（18px）、text-xl = 1.25rem（20px）、text-2xl = 1.5rem（24px）。這款換算器讓您能快速核對任何自訂 px 值與 Tailwind rem 系統的對應關係。
這款 px 轉 rem 換算器可以離線使用嗎？
可以，完全沒問題。換算器完全在您的瀏覽器中以 JavaScript 運行——不需要伺服器通訊，沒有 API 呼叫，也不上傳任何資料。頁面載入後即可離線使用。您輸入的數值不會離開您的裝置，不會儲存到任何伺服器。您可以將它加入書籤，在搭飛機、進隧道或任何沒有網路的地方編寫程式時照常使用。
如何更改換算器中的根字體大小？
在「根字體大小」欄位中輸入任意數值即可——或使用預設按鈕切換到 16px（瀏覽器預設）或 10px（62.5% 技巧）。對照表和目前輸入中的所有 rem、em 和 pt 換算都會立即重新計算，反映您的新根字體大小。若您的 CSS 設定了 html { font-size: 18px; }，輸入 18 作為根字體大小，所有換算結果都會準確符合您的專案比例。
