CSS單位：像素、百分比、視窗單位、em、rem、ex

在前端開發中，CSS的單位種類繁多，其中比較常用的包括像素（px）、百分比（%）、視窗單位（vw、vh、vmin、vmax）、em和rem、ex等等。這篇文章將詳細介紹每種單位的特點、優缺點以及適用場景，幫助開發者更好地選擇合適的單位來進行樣式設置。

一、像素（px）

像素是最常見的單位，是Web開發中通用的測量單位。每一個像素點是顯示器上最小的顏色點。它的大小可以被硬件所精確控制，因此在同樣的分辨率下，1個像素在不同設備上的物理尺寸是相同的。

例如，當我們在CSS中將一個元素的寬度設置成400px時，它的寬度將會恰好為400個像素，無論是在一台小屏幕的筆記本電腦還是一台大屏幕的電視機上。

但是，像素的缺點在於在不同設備和不同分辨率的屏幕上，同樣的像素數量會表現出不同的大小。因此，在開發中需要特別注意：

1. 在處理響應式Web設計時，不要直接使用像素作為尺寸單位，因為這樣會導致元素在不同大小和分辨率的屏幕上統一看起來較小或者較大。

2. 如果你要使用像素，應該盡量使用相對單位結合像素，例如，在設置字體大小時可以使用em單位。

    /* 不推薦 */
    .box {
       width: 400px;
       height: 200px;
       font-size: 16px;
    }

    /* 推薦 */
    .box {
       width: 70%;
       height: auto;
       font-size: 1rem;
    }

二、百分比（%）

百分比是相對單位，相對於其父元素的尺寸而言。百分比可以用於設定寬度、高度、內邊距以及外邊距等屬性。

百分比的優點是，可以根據父元素的大小自適應調整，能夠實現簡單的響應式布局。但是，如果父元素的尺寸不確定，使用百分比的效果也會變得不確定。

    .container {
      width: 100%;
      padding-bottom: 75%;
      background-color: #ccc;
    }

三、視窗單位（vw、vh、vmin、vmax）

視窗單位是相對於視窗（瀏覽器窗口）的大小而言的。它們是響應式布局設計的有力工具，被廣泛應用於移動設備中。

1. vw（視窗寬度單位）：1vw等於視窗寬度的1%。適用於水平尺寸，可以快速地使元素根據視窗大小縮放。

2. vh（視窗高度單位）：1vh等於視窗高度的1%。適用於垂直尺寸，可以用於製作全屏背景、高度固定但寬度自適應的元素等。

3. vmin（視窗寬度和高度中較小的那個）：可以用來設置字體大小，以適應不同視窗的大小和分辨率。

4. vmax（視窗寬度和高度中較大的那個）：可以用來設置元素的高度，也可以用於比較大的字體。

    .container {
       width: 100vw;
       height: 100vh;
       font-size: 5vmax;
    }

四、em與rem

em和rem都是相對單位，區別在於其參考系不同。

1. em單位是相對於元素的parent的字體大小，即1em等於其父元素的字體大小。

2. rem單位是相對於文檔根元素的字體大小，即1rem等於根元素的字體大小。

使用相對單位有兩個好處：1. 可以根據瀏覽器字體大小的改變而靈活調整；2. 可以輕鬆地將整個布局縮小或放大以適應不同的屏幕尺寸。

    /* em單位 */
    .container {
       font-size: 1.5em;
    }
    .box {
       width: 10em;
    }

    /* rem單位 */
    html {
       font-size: 14px;
    }
    .box {
       width: 10rem;
    }

五、ex

ex單位用來計算字體高度。一個ex等於一個小寫字母「x」的高度，通常情況下是當前字體大小的一半。

ex在使用時需要注意兩點：1. 不是所有字體都支持ex單位，特別是一些較小的字體，可能會出現問題；2. 在使用時應該盡量結合其他單位進行設置，比如em或者百分比，這樣能夠確保高度的準確性。

    .container {
       font-size: 16px;
    }
    .box {
       height: 2ex;
    }

六、總結

在CSS中，選擇使用何種單位取決於實際情況。如果需要精確地控制元素的大小，應該使用像素單位；如果需要響應式地布局設計，應該使用百分比、視窗單位或者相對單位；如果需要根據字體大小等動態調整元素大小，應該使用相對單位。合理運用各種單位，能夠使頁面開發變得更加靈活，易於維護。