CSS Units

Posted on Edited on In Views: Disqus:

 

CSS長度單位有em(用於調整字體大小居多)、rem(用於調整字體大小居多)、

px、%、vh、vw、vmax、vmin...等等，當然還有其他單位，

現只列出重要常用的就好。

em：一般人都會把1em當成是16px，是因為瀏覽器字型預設大小為16px，

但可別忘了其字級大小是會隨著巢狀層級而疊加的。

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            font-size: 1.5em; /*16px*1.5em=24px*/
            line-height: 2em;
        }

        div {
            font-size: 1.5em; /*16px*1.5em=24px*/
            border: 1px solid black;
        }

        span {
            font-size: 2em; /*24px*2em=48px*/
        }
    </style>
</head>
<body>

    <p>These paragraphs have a calculated line-height of: 16px*1.5em = 24px.</p>
    <div>The font-size of the div element is set to 24px. <span>The span element inside the div element has a font-size of 0.5em, which equals to 24x2 = 48px</span>.</div>

</body>
</html>

 

rem：rem的字義是「root em」，簡單地說，就是先宣告一個所有網頁元件都共用的em單位，

接著，所有字級都依此標準來設計制定。

<!DOCTYPE html>
<html>
<head>
    <style>
        html {
            font-size: 75%; /*16px*75%=12px*/
        }

        p {
            font-size: 1.5em; /*12px*1.5em=18px*/
            line-height: 2em;
        }

        div {
            font-size: 1.5em; /*12px*1.5em=18px*/
            border: 1px solid black;
        }

        span {
            font-size: 2rem; /*12px*2rem=24px*/
        }
    </style>
</head>
<body>

    <p>These paragraphs have a calculated line-height of: 12px*1.5em = 18px.</p>
    <div>The font-size of the div element is set to 18px. <span>The span element inside the div element has a font-size of 0.5em, which equals to 12x2 = 24px</span>.</div>

</body>
</html>

 

%：百分比最常用來調整寬度與高度，其用法也是會隨著巢狀層級而疊加的。

例如：知道為什麼設height: 100%;卻無效嗎?因為其父元素的高度沒有設定。

 

vh：當在瀏覽頁面時，是上下捲動的話，則推薦使用 vh。

 

vw：當在瀏覽頁面時，是左右捲動的話，則推薦使用 vw。

 

vmax：

數值大小是根據瀏覽器寬度與高度兩者中，選擇較大的來作 vmax 單位比例。

 

vmin：

數值大小是根據瀏覽器寬度與高度兩者中，選擇較小的來作 vmin 單位比例。

 

參考資料：

HTML, CSS, 相對視窗或螢幕的高度與寬度

Viewport units: vw, vh, vmin, vmax

CSS Units