CSS中所有度量單位

一、像素（px）

像素是CSS中最常見也是最基礎的度量單位，在網頁中佔據着十分重要的地位。像素的大小不受系統、屏幕和瀏覽器的影響，其大小是固定的，因此可以保證在不同設備上的顯示效果基本一致。為了控制元素的寬高、字體的大小等，我們通常會使用像素作為單位。

    /* 設置 font-size 為 16px */
    body {
        font-size: 16px;
    }
    
    /* 設置元素寬度為 200px，高度為 150px */
    .example {
        width: 200px;
        height: 150px;
    }

二、百分比（%）

百分比是一種非常靈活的度量單位，其值是以父元素的百分比為基礎來計算的。比如，如果一個寬度為400px的父元素中包含一個寬度為50%的子元素，那麼子元素的寬度將會是200px。

    /* 設置寬度為父元素的50% */
    .example {
        width: 50%;
    }

三、視口單位（vw，vh，vmin，vmax）

視口單位是相對於瀏覽器窗口的大小來計算的度量單位。vw（viewport width）表示1%的窗口寬度；vh（viewport height）表示1%的窗口高度；vmin表示窗口寬度或高度中的最小值；vmax表示窗口寬度或高度中的最大值。

視口單位常用於響應式布局中，可以根據不同的設備自適應調整元素大小。

    /* 在窗口寬度為1000px時，寬度為100px */
    .example {
        width: 10vw;
    }
    
    /* 在窗口高度為800px時，高度為100px */
    .example {
        height: 12.5vh;
    }
    
    /* 在窗口寬度和高度中的最小值為500px時，大小為100px */
    .example {
        font-size: 20vmin;
    }
    
    /* 在窗口寬度和高度中的最大值為800px時，大小為100px */
    .example {
        font-size: 12vmax;
    }

四、EM（以父元素字體大小為基礎）

EM是一種相對於父元素設置大小的度量單位，其值是以父元素字體大小為基礎來計算的。比如，如果一個字體大小為16px的元素中包含一個字體大小為0.5em的子元素，那麼子元素的字體大小將會是8px。EM單位可以實現比較高效的自適應調整，尤其是在配合響應式布局使用時，可以讓界面按照比例縮放，適應不同屏幕尺寸的設備。

    /* 以父元素字體大小為基礎，設置字體大小為1.2em */
    .example {
        font-size: 1.2em;
    }
    
    /* 以父元素字體大小為基礎，設置寬度為2em */
    .example {
        width: 2em;
    }

五、REM（以根元素字體大小為基礎）

REM是一種相對於根元素（即html元素）設置大小的度量單位，其值是以根元素字體大小為基礎來計算的。比如，如果html元素中字體大小為16px，那麼1rem的大小就是16px。與EM相似，REM單位也可以實現高效的自適應調整。

    /* 以根元素字體大小為基礎，設置字體大小為1.2rem */
    .example {
        font-size: 1.2rem;
    }
    
    /* 以根元素字體大小為基礎，設置寬度為20rem */
    .example {
        width: 20rem;
    }