CSS測量單位列表

一、em和rem

em是相對單位，相對於元素的字體大小。它可以用來設置元素的寬度、高度、內邊距和外邊距。它的計算方式是與父元素的字體大小相關聯的，在一定程度上提供了更好的可預測性。然而，當多層嵌套時，其中的em可能變得複雜難以管理。

    
        .parent {
            font-size: 16px;
        }
        .child {
            font-size: 1.2em; /* 相對於父元素16px來計算 */
            width: 10em; /* 相對於自己的字體大小來計算 */
        }
    

rem是相對單位，相對於根元素的字體大小。它的計算方式類似於em，但其基準是根元素的字體大小，保持不變，使其更為可靠。使用rem隨著瀏覽器的縮放，元素的大小會隨之調整。

    
        html {
            font-size: 16px; /* 基礎字體大小 */
        }
        .child {
            font-size: 1.2rem; /* 相對於根元素，即16px*1.2 */
            width: 10rem; /* 相對於根元素，即16px*10 */
        }
    

二、px

px是絕對單位，它是一個基於物理像素的單位，使得元素可以按具體像素來設置，在不同的設備上顯示效果一致。但是，由於像素的大小是相對的，可能在高分屏上顯示不夠清晰。

    
        .child {
            font-size: 16px;
            width: 200px; /* 直接設置像素值 */
            height: 100px;
        }
    

三、vw和vh

vw和vh是相對單位，相對於視口寬度和高度的百分比。它們提供了在響應式Web設計中調整元素大小的可靠方法。

    
        .child {
            font-size: 16px;
            width: 50vw; /* 相對於視口寬度50% */
            height: 25vh; /* 相對於視口高度25% */
        }
    

四、%和calc()

%相對於父元素的寬度或高度計算，可以用於設置元素的大小，邊距和位置。calc()允許在數學表達式中使用各種單位來計算元素的大小和位置。

    
        .parent {
            width: 500px;
            height: 300px;
            margin: 10%; /* 相對於父元素的寬度、高度的10% */
        }
        .child {
            width: calc(50vw - 200px); /* 用數學公式計算寬度 */
        }