CSS 單位換算
在 px、rem、em、pt、vw、vh、cm 等 CSS 單位之間換算，可自訂根元素字級與視窗大小。
可以直接帶單位輸入，例如 1.5rem、12pt
換算結果
24px = 24px
- 像素（px）輸入值
- 根元素字級（rem）
- 父元素字級（em）
- 百分比（%，相對父元素字級）
- 點（pt）
- 派卡（pc）
- 英寸（in）
- 公分（cm）
- 公釐（mm）
- 四分之一公釐（Q）
- 視窗寬度 1%（vw）
- 視窗高度 1%（vh）
- 視窗短邊 1%（vmin）
- 視窗長邊 1%（vmax）
CSS
font-size: 1.5rem; /* 24px */常用尺寸對照表
以根元素 16px、父元素 16px 計算
| px | rem | em | pt | % |
|---|---|---|---|---|
| 10px | 0.625rem | 0.625em | 7.5pt | 62.5% |
| 12px | 0.75rem | 0.75em | 9pt | 75% |
| 14px | 0.875rem | 0.875em | 10.5pt | 87.5% |
| 16px | 1rem | 1em | 12pt | 100% |
| 18px | 1.125rem | 1.125em | 13.5pt | 112.5% |
| 20px | 1.25rem | 1.25em | 15pt | 125% |
| 24px | 1.5rem | 1.5em | 18pt | 150% |
| 28px | 1.75rem | 1.75em | 21pt | 175% |
| 32px | 2rem | 2em | 24pt | 200% |
| 36px | 2.25rem | 2.25em | 27pt | 225% |
| 40px | 2.5rem | 2.5em | 30pt | 250% |
| 48px | 3rem | 3em | 36pt | 300% |
| 56px | 3.5rem | 3.5em | 42pt | 350% |
| 64px | 4rem | 4em | 48pt | 400% |
| 72px | 4.5rem | 4.5em | 54pt | 450% |
| 96px | 6rem | 6em | 72pt | 600% |
使用說明
- 輸入數值並選擇單位，也可以直接輸入 1.5rem、12pt 這類帶單位的值。
- 依你的網站調整根元素字級（通常是 16px）、父元素字級與視窗大小；視窗大小預設為目前瀏覽器視窗。
- 每一種單位的結果都會即時列出，按「複製」取得該值。
- 在 CSS 區塊填入屬性名稱並選擇輸出單位，複製整行 CSS。
- 下方的對照表列出常用像素尺寸對應的 rem、em、pt 與百分比。
常見問題
rem 和 em 有什麼不同？
rem 永遠以根元素（html）的字級為準，瀏覽器預設是 16px，所以 1.5rem 就是 24px；em 以父元素的字級為準（用在 padding、margin 時則是元素本身的字級），巢狀時會一層層累積。版面尺寸通常用 rem，想跟著文字大小縮放的間距用 em。
為什麼建議用 rem 而不是 px 設定字級？
使用者可以在瀏覽器設定中調大預設字級。用 rem 時整個網站會跟著放大，用 px 寫死則不會，對視力不好的使用者不友善。
CSS 的 1cm 真的是 1 公分嗎？
不一定。CSS 規定 1in = 96px，cm、mm、pt 都由此換算，螢幕上顯示的實際長度取決於裝置的像素密度與縮放比例。實體單位主要用於列印樣式。
% 是相對什麼？
本工具的 % 以父元素字級計算，也就是設定 font-size 時的意義（150% = 1.5em）。用在 width、padding 等屬性時，% 是相對容器的寬度，無法單純換算成 px。
vw、vh、vmin、vmax 怎麼算？
1vw 是視窗寬度的 1%，1vh 是高度的 1%；vmin 與 vmax 分別取寬高中較小與較大的一邊。手機瀏覽器的網址列會影響 vh，需要時可考慮 dvh、svh 等新單位。所有計算都在你的瀏覽器中完成。