這個換算器能做什麼
「px 轉 rem/em 換算器」可以把像素數值換算成 rem 和 em，也能反過來，把 rem 或 em 換算回 px。「數值」區有 px、rem、em 三個單位欄位，只要編輯其中一個，另外兩個就會隨你輸入自動算出並顯示。你也可以自行設定根字級，以及專門用於 em 換算的上下文字級，讓換算結果符合你實際的設計需求。
三個輸入欄位分別做什麼
- 「根字級(px)」：以像素表示的根字級數值。
- 「em 上下文字級(px)」：以像素表示、用於 em 換算的元素字級數值。
- 「數值」：要換算的長度，可以輸入 px、rem 或 em。
正如提示文字所寫：「輸入 px、rem 或 em 數值,另外兩欄會跟著更新。」也就是說，你不用自己分別算三次，只要在任一單位欄位打字，其餘兩欄就會即時同步。
換算結果與常用對照表
輸入數值之後，頁面會顯示「根字級(px)」與「em 上下文字級(px)」目前的設定值，以及「數值」欄位換算後在 px、rem、em 三種單位下的結果；三種單位都算好之後，會出現「三種單位已同步換算。」的提示。頁面下方另外提供一份「常用 px → rem(16px 根字級)」對照表，列出常見的像素數值在 16px 根字級下換算成 rem 的結果，方便你直接查表。
根字級與 em 上下文字級的預設值
根字級與 em 上下文字級的預設值都是 16px，剛開始時 16px 等於 1rem，也等於 1em。根字級必須是大於 0 的數字，em 上下文字級同樣必須是大於 0 的數字。「數值」欄位則允許輸入負的像素數值。
輸入不符規定時會看到什麼提示
如果「數值」欄位沒有輸入有效數字，頁面會顯示「請輸入一個數字來換算。」；如果「根字級(px)」欄位的內容無效，會顯示「根字級必須是大於 0 的數字。」；如果「em 上下文字級(px)」欄位的內容無效，則會顯示「em 上下文字級必須是大於 0 的數字。」這三則提示分別對應三個欄位各自的規則，能讓你知道要修正的是哪一欄。
適合哪些情況使用
如果你需要把固定的像素數值換成響應式設計常用的 rem 或 em 單位，這個工具很適合。想了解不同根字級會怎麼影響 rem 換算結果的人，或是需要依照特定元素字級計算 em 數值的人，也可以用它來確認數字。此外，如果你想確保讀者調整瀏覽器預設字級之後，版面尺寸仍然能正確縮放，同樣可以用這個換算器來檢查。
資料處理方式
所有換算都在你的瀏覽器本機完成,輸入內容不會上傳到 BroBroGo。
常見問題
px、rem 和 em 有什麼差別?
px 是固定長度;rem 相對於頁面的根字級,根字級為 16px 時 1rem 就是 16px;em 相對於所在元素的字級。用 rem 設定字級和間距,讀者調大預設字級時整體也會跟著放大。
為什麼要另外設 em 上下文字級?
em 相對於它所在元素的字級,而這個字級未必等於根字級。把 em 上下文設成那個元素的實際字級,換算才會準確;兩者相同時,和根字級保持一致即可。
根字級不是 16px 該怎麼辦?
把根字級那一欄改成和你 CSS 裡一致,所有 rem 數值都會立刻更新。下面的小表對應多數網站預設的 16px 根字級,方便隨手查看。