PX與REM單位換算工具(PX to REM Converter)
免費的px與rem相互換算工具。可自由修改根元素(html)的font-size基準值,即時查看換算結果,適用於響應式設計與無障礙設計。
PX轉REM對照表(基準16px)
假設根元素font-size為瀏覽器預設值16px時,常用px值對應的rem值。
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 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 |
使用小技巧
- 瀏覽器預設1rem等於16px,但視力較弱的使用者可能會在瀏覽器中調大預設字級,使用rem可以讓頁面自動跟隨該設定縮放。
- 媒體查詢(@media)的斷點通常習慣以px指定,而font-size、padding、margin等間距則建議使用rem,這樣在使用者調整字級偏好時,整體版面比例更容易維持協調。
- 有些專案會設定html { font-size: 62.5%; },讓1rem等於10px,方便心算換算(1.6rem等於16px)。可以在上方基準值欄輸入10來體驗這種換算方式。
- 常見的慣例是頁面整體版面用rem,元件內部間距用em,這樣元件在任何地方使用時都能跟隨自身字級縮放。
常見問題
不是。1rem的基準是根元素(<html>)的font-size,只有在瀏覽器預設值16px的情況下才等於16px。若CSS修改了根元素的font-size,或使用者在瀏覽器中調整了預設字級,實際換算出的px值就會改變。
rem始終以根元素(<html>)的font-size為基準,無論巢狀多少層都保持一致。而em則以「目前元素的父元素font-size」為基準,元素巢狀越深,實際大小越容易偏離預期。
使用rem可以讓文字大小隨使用者在瀏覽器或系統輔助功能中調大字級而同步放大。若固定使用px,這種放大設定就不會生效,對視力較弱的使用者不夠友善。
將設計稿中的px值除以專案實際的根元素font-size(預設16)即可得到rem值。若專案將根元素font-size改成了其他數值,請先在本工具的基準值欄輸入該數值再進行換算,結果才會與實際CSS一致。
閒話 ― rem單位如何被納入CSS規範
rem單位大約在2011年前後被納入CSS Values and Units Module規範。在此之前,幾乎所有網頁都只用px或em來設定文字與間距大小,而em有一個廣為人知的麻煩:由於它以父元素的font-size為基準,元素巢狀越多,實際大小就越容易在複雜版面中偏離預期。
rem正是為了解決這個問題而設計的:它始終參照同一個基準——根元素,無論元素巢狀多深,計算結果都不會偏移。在Internet Explorer 9尚不支援rem的年代,開發者常常先寫一行px作為相容寫法,再補一行rem(font-size: 16px; font-size: 1rem;)。等到2010年代中期各大瀏覽器普遍支援rem後,這種相容寫法才逐漸不再必要。
如今,圍繞rem統一建構整站的字級與間距體系已成為無障礙設計的常見做法:當訪客調大瀏覽器字級時,整個頁面能夠平滑放大而不會錯位或被裁切。WCAG(Web內容無障礙指南)等規範也明確建議不要僅依賴固定單位來設定文字大小。