【CSS 原理】大小 Size

Photo by Pankaj Patel on Unsplash

單位

網頁單位

單位	類型	說明
px	絕對單位	螢幕中每個「點」( pixel )
em	相對單位	每個子元素透過 `「倍數」` 乘以父元素的 px 值。
rem	相對單位	每個元素透過 `「倍數」` 乘以根元素 `<html>` 的 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%

印刷

單位	說明
pt	印表機的每個「點」，定義為 1 pt ＝ 1/72 in，如果在 72 dpi 的系統上 1 px = 1 pt，但如果在 96 dpi 的系統上 1 px = 0.75 pt ( 72/96 = 0.75 )。
in	英吋，在 96 dpi 的系統上 1 in = 96 px。
cm	公分，在 96 dpi 的系統上 1 cm = 37.795275593333 px。
mm	公釐，在 96 dpi 的系統上 1 cm = 3.7795275593333 px。

Example

根元素 <html> 若沒有設定字體大小，預設為 16px

html{
    font-size:16px;
}

html * {
    font-size: 1rem;
}

px

16px

20px

24px

16px

32px

<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

1.2em

<div style="font-size:1.2em;">1.2em
    <div style="font-size:1.2em;">1.2em
        <div style="font-size:1.2em;">1.2em
            <div style="font-size:1.2em;">1.2em
                <div style="font-size:1.2em;">1.2em</div>
            </div>
        </div>
    </div>
</div>

rem

1.2rem

<div style="font-size:1.2rem;">1.2rem
    <div style="font-size:1.2rem;">1.2rem
        <div style="font-size:1.2rem;">1.2rem
            <div style="font-size:1.2rem;">1.2rem
                <div style="font-size:1.2rem;">1.2rem</div>
            </div>
        </div>
    </div>
</div>

%

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 style="font-size:120%;">120%</div>
            </div>
        </div>
    </div>
</div>

small、medium、large

xx-small

x-small

small

medium

large

x-large

xx-large

<div style="font-size:xx-small;">xx-small
    <div style="font-size:x-small;">x-small
        <div style="font-size:small;">small
            <div style="font-size:medium;">medium
                <div style="font-size:large;">large
                    <div style="font-size:x-large;">x-large
                        <div style="font-size:xx-large;">xx-large</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

larger、smaller

medium

larger

smaller

<div style="font-size:medium;">medium
  <div style="font-size:larger;">larger
    <div style="font-size:larger;">larger
      <div style="font-size:larger;">larger
        <div style="font-size:smaller;">smaller
          <div style="font-size:smaller;">smaller
            <div style="font-size:smaller;">smaller</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

參考資料

Donate KJ 贊助作者喝咖啡

如果這篇文章對你有幫助的話，可以透過下面支付方式贊助作者喝咖啡，如果有什麼建議或想說的話可以贊助並留言給我

If this article has been helpful to you, you can support the author by treating them to a coffee through the payment options below. If you have any suggestions or comments, feel free to sponsor and leave a message for me!

方式 Method	贊助 Donate
PayPal	https://paypal.me/kejyun
綠界 ECPay	https://p.ecpay.com.tw/AC218F1
歐付寶 OPay	https://payment.opay.tw/Broadcaster/Donate/BD2BD896029F2155041C8C8FAED3A6F8