【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