如何使用此計算機
輸入數值和單位，選擇目標單位。可自訂基礎字型大小（預設 16px）和視窗寬高。
公式與原理
1 rem = 根元素字型大小（預設 16px）。1 em = 父元素字型大小。1 vw = 視窗寬度 1%。
計算範例
24px = 1.5rem（基礎 16px 時）。2rem = 32px。50vw = 視窗寬度的一半。
專家建議
響應式設計優先用 rem。固定大小用 px。版面佈局用 vw/vh。避免混用太多不同單位。
rem 和 em 差在哪：一個常見的坑
rem 永遠參照根元素（<html>）的字型大小，em 參照的是父元素。這個差別在巢狀結構裡會造成完全不同的結果：如果父層設 font-size: 1.2em，子層再設 1.2em，實際會變成 1.44 倍——em 會一層層累乘。用 rem 就不會有這個問題，不管巢狀多深，1.2rem 永遠是根字型的 1.2 倍。
所以字型大小用 rem 比較好維護；em 則適合「相對於自己字級」的場景，例如按鈕的 padding: 0.5em 1em，字變大時內距會跟著等比放大。
為什麼無障礙建議字型不要用 px
使用者可以在瀏覽器設定裡調整預設字型大小（給視力不佳的人用）。字型用 rem 或 em 時會跟著放大，但寫死 px 的文字在部分情境下不會反應這個設定，等於忽略了使用者的需求。這也是 WCAG 無障礙準則建議避免用 px 定義字級的原因。
實務上的折衷：字級、行距、間距用 rem；邊框寬度（1px）、細線這類本來就該固定的用 px。
常用換算對照（基礎 16px）
| px | rem | 常見用途 |
|---|---|---|
| 12px | 0.75rem | 註解、標籤文字 |
| 14px | 0.875rem | 次要內文 |
| 16px | 1rem | 內文基準（瀏覽器預設） |
| 20px | 1.25rem | 小標題 |
| 24px | 1.5rem | H3 |
| 32px | 2rem | H2 |
| 48px | 3rem | 大標題、區塊間距 |
換算公式：rem = px ÷ 根字型大小。若你把根字型改成 10px（html { font-size: 62.5% }）換算會變成除以 10，心算比較快，但要留意這會壓縮使用者自訂字級的效果。
vw / vh 的兩個實務陷阱
第一個是手機瀏覽器的網址列：100vh 在 iOS Safari 上包含被網址列遮住的區域，捲動時高度會跳動，畫面因此閃一下。現在建議改用 100dvh（dynamic viewport height），它會跟著可視區域變化。
第二個是捲軸寬度：100vw 包含垂直捲軸的寬度，在桌機上用 width: 100vw 常會多出幾像素而產生水平捲軸。要滿版通常用 width: 100% 就好。