分類: 開發工具
CSS 單位換算器
換算 px、rem、em、%、vw 與 vh
輸入一個 px、rem、em、百分比、vw 或 vh 數值，並填寫它所依據的基準字級、視窗與容器，就能得到換算成其他所有單位後的同一個長度。
換算根據你輸入的數值在頁面內完成，不會傳送到任何地方。
本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。
這個工具能做什麼
px 換算成 rem 到哪裡都是同一套算法，但百分比、vw 與 vh 不是如此——它們取決於容器尺寸或視窗，而這兩者會隨頁面改變。這個工具會先問清楚這些前提，算出來的數字才是頁面上真正會顯示的結果，而不是憑空假設根字級是 16px。rem 與 em 在這裡以同一種方式處理，都由你填寫的基準字級換算而來，因為沒有頁面上實際存在的父層元素，也就沒有另一個父層尺寸可以把兩者區分開。試著調整基準字級，就能看到訪客放大文字設定後，所有 rem 與 em 數值會一起怎麼變化。
使用方式
- 輸入數值並選擇要換算的原始單位。
- 設定對應的基準字級、視窗寬高與容器尺寸。
- 查看同一個長度換算成其他所有單位後的結果。
隱私說明
本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。
常見問題
- 為什麼 rem 與 em 算出來的結果一樣？
- 因為兩者都由基準字級換算而來。rem 原本該一律使用根元素的字級，em 則用父層元素的字級，但這個工具沒有頁面可以讀取真正的父層尺寸，所以把你填寫的基準字級同時當成兩者使用。
- 容器尺寸有什麼用途？
- 它是百分比的參照基準。百分比只有相對某個量才有意義，這裡那個量就是你填寫的容器尺寸。
- 會有資料傳送到伺服器嗎？
- 不會。換算根據你輸入的數值，全部在頁面內算出。