網頁 ( 單位 )

  • px：絕對單位，代表螢幕中每個「點」( pixel )。
  • em：相對單位，每個子元素透過「倍數」乘以父元素的 px 值。
  • rem：相對單位，每個元素透過「倍數」乘以根元素的 px 值。
  • %：相對單位，每個子元素透過「百分比」乘以父元素的 px 值。

網頁 ( 屬性名稱 )

  • medium：預設值，等於 16px ( h4 預設值 )
  • xx-small：medium 的 0.6 倍 ( h6 預設值 )
  • x-small：medium 的 0.75 倍
  • small：medium 的 0.8 倍 ( h5 預設值，W3C 定義為 0.89，實測約為 0.8 )
  • large：medium 的 1.1 倍 ( h3 預設值，W3C 定義為 1.2，實測約為 1.1 )
  • x-large：medium 的 1.5 倍 ( h2 預設值 )
  • xx-large：medium 的 2 倍 ( h1 預設值 )
  • smaller：約為父層的 80%
  • larger：約為父層的 120%

px

px 是一種絕對單位，設定多少大小就會在螢幕上忠實呈現。

1
2
3
4
5
6
7
8
9
<div style="font-size:16px;">16px
    <div style="font-size:20px;">20px
        <div style="font-size:24px;">24px
            <div style="font-size:16px;">16px
                <div style="font-size:32px;">32px</div>
            </div>
        </div>
    </div>
</div>

em

em 是相對單位，為每個子元素透過「倍數」乘以父元素的 px 值

比較特別的是，如果巢狀結構比較多層，內層的元素會在乘上 em 的倍率喔！

rem

rem 是相對單位，為每個元素透過「倍數」乘以根元素的 px

所有 rem 的更動都是根元素的倍數

%

% 百分比是相對單位，和 em 大同小異，簡單來說 em 就是 % 數字的部分除以一百

1
2
3
4
5
6
7
8
9
<div style="font-size:120%;">120%
    <div style="font-size:120%;">120%
        <div style="font-size:120%;">120%
            <div style="font-size:120%;">120%
                <div style="font-size:120%;">120%</div>
            </div>
        </div>
    </div>
</div>

最外層 html font-size = 16px的話

最內層就會是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px

實作上面的選擇

選擇em

建議使用在限制區域的內容、元件

選擇rem

因為是根元素的倍數所以很適合處理整體大小尺寸的切換