本篇重點
- 常見的相對單位：%、em、rem、vh、vw
- 相對單位的使用方式和時機
在 CSS 中，除了固定的像素單位（px）之外，還有許多相對單位可以根據父元素比例或視窗大小或元素字體自動調整，是現代響應式設計（RWD）不可或缺的工具。
%：父元素的相對比例
最基本的相對單位，常用來設定元素尺寸（例如 width、height、margin、padding 等），其值是相對於父元素對應屬性的比例，表示當父元素的尺寸改變時，使用百分比的子元素會隨之縮放。
範例
利用百分比設計圖片區塊，讓圖片隨著不同的螢幕寬度自適應
1 | <div class="responsive-wrapper"> |
1 | /* 寬度預設為 width: 100%，寬度隨螢幕寬度改變 */ |
em：字體大小的相對單位
相對於當前元素或父元素字體大小的單位，常用於需要隨字體大小變化調整元素大小的排版，例如調整字體和內邊距，讓內、外邊距跟隨字體大小調整，保持整體視覺一致，或是設置多層次樣式，呈現層級關係時使用。
假設一個父容器的字體大小為 20px，子元素的 padding 設為 1.5em，則子元素實際的 padding 值為 30px，因為 1.5em * 20px = 30px。
健忘筆記
em 的參照順序：
- 當前元素有設置
font-size，則em以當前元素的字體大小為基準。 - 若當前元素沒有設定
font-size，會沿著 DOM 樹逐層向上找，直到找到最近一個有font-size的父元素。 - 如果沒有找到設置的字體大小，則最終會參照根元素
<html>的font-size。根元素默認值通常是16px（但可透過 CSS 調整，例如html { font-size: 10px; }）。
範例
1 | <div class="parent"> |
1 | .parent { |
健忘筆記
em 是相對於當前元素或父元素字體大小的單位，如果父元素和當前元素同時使用 em，則當前元素屬性的大小會隨著層級增加而累積
rem：根元素字體大小的相對單位
rem（root em）是相對於根元素（通常是 <html>）字體大小的單位，統一的相對大小能確保在頁面中一致性設計。
假設根元素的字體大小為 20px，其子元素的 padding 設為 1.5rem，則子元素實際的 padding 值為 30px，因為 1.5rem * 20px = 30px。
範例
1 | <div class="container"> |
1 | /* 根元素 font-size 預設 16px */ |
vh 和 vw：用戶視窗高和寬的比例
相對於用戶視窗高度和寬度的單位，適合設計需要相對於視窗尺寸而調整的布局，讓元素能隨著不同裝置和瀏覽器窗口大小動態縮放，常用於設置全螢幕背景或全螢幕容器，例如：lightbox。
1vh表示視窗高度的 1%20vw表示視窗寬度的 20%
範例
1 | <img src="https://forgetfulengineer.github.io/gallery/covers/Understanding-five-Common-Relative-Units.png"> |
1 | img { |
健忘筆記
- 裝置旋轉的影響：
vh和vw會根據視窗實際顯示區的高度和寬度來計算，因此旋轉裝置時，元素可能會突然變大或縮小。 - 捲軸條影響：若瀏覽器視窗出現垂直或水平捲軸條，會佔據一定的寬度或高度，影響到
vw和vh的實際計算結果。
本網站的 lightbox 使用 vw 來控制寬度，可以點擊 實例搶先看 或 文章圖片 查看元素的寬度～
結論
這些相對單位可以更靈活得設計響應式佈局，並確保網頁在不同設備和視窗大小上都能有適當的呈現。
%：父元素的相對比例em：當前元素或父元素字體大小的相對單位rem：根元素字體大小的相對單位vh和vw：用戶視窗高和寬的比例
動手做做看