CSS基礎
CSS 中 px、em、rem 的區別？又該如何選擇用哪個？
三種單位的定義
px（像素）
- 絕對單位，1px 等於螢幕上的一個邏輯像素
- 不受父元素或根元素字體大小影響
- 在高解析度（Retina）螢幕上，1px 可能對應多個物理像素
em
- 相對單位，相對於當前元素的字體大小
- 若當前元素無設定，則繼承父元素的字體大小
- 容易因層層巢狀而造成難以預期的大小（複合效果）
/* 父層 font-size: 16px */
.parent { font-size: 16px; }
/* 子層 1em = 16px, 2em = 32px */
.child { font-size: 2em; } /* = 32px */
/* 孫層 1em = 32px */
.grandchild { font-size: 1.5em; } /* = 48px，繼續放大！ */
rem（root em）
- 相對單位，相對於根元素（
<html>）的字體大小 - 瀏覽器預設
html { font-size: 16px } - 不受巢狀影響，更易預測與維護
html { font-size: 16px; }
.title { font-size: 2rem; } /* = 32px，永遠相對於 html */
.text { font-size: 1rem; } /* = 16px */
如何選擇？
| 情境 | 推薦單位 |
|---|---|
| 固定尺寸（border、shadow） | px |
| 字體大小（響應式設計） | rem |
| 元件內部間距（相對於元件字體） | em |
| 版面整體響應式縮放 | rem |
現代開發建議：字體與大部分間距使用
rem，僅在需要相對父元素時使用em。
✦ AI 模擬面試
輸入你的答案，AI 即時分析精準度與改進空間
登入後即可使用 AI 評分