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 |
PX⇔REM 換算工具是什麼
把 px 指定的尺寸換成 rem，或把 rem 換回 px。根元素（html）的 font-size 基準值可以自由更改，換算的結果隨之呈現。
首先要弄清的是，rem 所依的是根元素的字級，而這個字級是使用者可以更改的。 瀏覽器設定裡的「字型大小」若被調大，rem 指定的一切便隨之放大——這正是 rem 的用意所在。因此，切莫在 CSS 裡寫下 html { font-size: 16px }。 如此一來便把使用者的設定壓了下去，視力不佳者放大字體的路也被堵死了。若要動基準值，請用 % 或 rem 這類相對的寫法。
其次，em 與 rem 的不同在於是否疊加。 em 以其所在元素的字級為準，故而層層巢狀時會不斷相乘；rem 則始終只看根元素，無論套了多少層都不變。
還有一處易被絆住：媒體查詢裡的 em，其基準並非根元素的字級，而是瀏覽器的預設值。 縱然把 html 的字級改小，媒體查詢的斷點也不會跟著動。
使用的步驟
- 定下基準值 多數瀏覽器的預設值為 16px。 若不確定，保持 16 即可。
- 填入 px 或 rem 任一側填入數值，另一側即刻現出換算的結果。
- 複製 CSS 的寫法 可把帶單位的字串直接取走。
- 查看對照表 常用的尺寸列成一覽，便於逐一挑選。
用好本工具的小技巧
- 瀏覽器預設1rem等於16px，但視力較弱的使用者可能會在瀏覽器中調大預設字級，使用rem可以讓頁面自動跟隨該設定縮放。
- 媒體查詢（@media）的斷點通常習慣以px指定，而font-size、padding、margin等間距則建議使用rem，這樣在使用者調整字級偏好時，整體版面比例更容易維持協調。
- 有些專案會設定html { font-size: 62.5%; }，讓1rem等於10px，方便心算換算（1.6rem等於16px）。可以在上方基準值欄輸入10來體驗這種換算方式。
- 常見的慣例是頁面整體版面用rem，元件內部間距用em，這樣元件在任何地方使用時都能跟隨自身字級縮放。
這些情境會用到
把設計稿的數值落到 CSS 時
設計稿多以 px 交付。 基準值既定，便可機械地換成 rem。
統一既有專案的單位時
px 與 rem 混雜的程式碼，整理時可將此表置於手邊。
更改根基準值以觀察影響時
基準值一改，凡以 rem 指定之處盡數連動。 幅度可預先確認。
決定媒體查詢的斷點時
媒體查詢的 em 不以根元素為準，而以瀏覽器預設值為準。 換算的前提本就不同。
這一領域的術語
- rem
- 以根元素（html）字級為基準的相對單位。無論巢狀多深，其基準始終不變。
- em
- 以所在元素字級為基準的相對單位。層層巢狀時會不斷相乘。
- 根元素
- 文件最外層的
html元素。rem 的一切換算皆以它的字級為本。 - 瀏覽器預設字級
- 多數環境為 16px。使用者可自行更改，而這正是應予尊重之處。
- 以 px 指定 html 的字級
- 會壓過使用者的設定，故應避免。 要動基準值，請用
%之類的相對寫法。 - 媒體查詢中的 em
- 不以根元素，而以瀏覽器預設值為基準。 改動 html 的字級，斷點不會隨之移動。
常見問題
閒話 ― rem單位如何被納入CSS規範
rem單位最早出現在W3C於2006年9月發布的草案《CSS3 Values and Units》中。在它普及之前，幾乎所有網頁都只用px或em來設定文字與間距大小，而em有一個廣為人知的麻煩：由於它以父元素的font-size為基準，元素巢狀越多，實際大小就越容易在複雜版面中偏離預期。
rem正是為了解決這個問題而設計的：它始終參照同一個基準——根元素，無論元素巢狀多深，計算結果都不會偏移。在仍需相容不支援rem的Internet Explorer 8及更早版本的年代，開發者常常先寫一行px作為相容寫法，再補一行rem（font-size: 16px; font-size: 1rem;）（IE9、IE10也只是部分支援，在font簡寫屬性與偽元素中會忽略rem）。等到2010年代中期不再需要相容這些舊版IE後，這種相容寫法才逐漸不再必要。
如今，圍繞rem統一建構整站的字級與間距體系已成為無障礙設計的常見做法：當訪客調大瀏覽器字級時，整個頁面能夠平滑放大而不會錯位或被裁切。WCAG（Web內容無障礙指南）等規範也明確建議不要僅依賴固定單位來設定文字大小。