CSS單位轉換器（px / rem / em / vh / vw）

為什麼使用 rem，而不是 px

瀏覽器的起始值是 16px，但弱視使用者常會在瀏覽器設定中調高預設字型大小。使用 rem 設定大小的文字會隨著該設定放大，使用 px 的文字則不會。頁面縮放會同時放大兩者，但許多讀者依賴的是字型大小設定，而 WCAG 的調整文字大小準則要求文字放大到 200%時仍不會失去內容。請用 rem 設定文字大小及其周圍間距，細線和邊框則保留使用 px。

em 欄位與巢狀結構

em 是相對於元素自身字型大小的單位；但對 font-size 本身而言，它是相對於父元素的字型大小。這裡的 em 值假設父元素使用根字型大小，但這只在頂層成立。在 0.875em 元素內再次使用 0.875em，得到的是 12.25px，而不是 14px，縮小效果也會層層累積。因此 rem 是較安全的預設值，而 em 適合用於應隨元件文字縮放的間距。

62.5% 基準與 viewport 單位

設定 html { font-size: 62.5% } 會讓 1rem 等於 10px，方便計算；請輸入 10 作為基準大小以符合這項設定。這會縮小所有其他以 rem 設定大小的內容，包括第三方元件，因此請再次在 body 上設定易於閱讀的大小。

vw 和 vh 數值假設 viewport 為 1440 × 900。在手機上，瀏覽器工具列顯示時，100vh 可能會比可見區域更高；100svh 和 100dvh 才是會將這種情況納入考量的單位。

使用方式

1. 輸入像素值（px）和根元素基準大小（預設16px）。
2. 查看計算出的rem、em、vw和vh值。
3. 複製可直接使用的CSS片段，或參考尺度表。

隱私與限制

在用戶端JavaScript中立即執行。