大小 Size

CSS: 大小 Size
Categories:
Tags:

單位

網頁單位

單位 類型 說明
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
1.2em
1.2em
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 style="font-size:1.2em;">1.2em</div>
            </div>
        </div>
    </div>
</div>

rem

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

%

120%
120%
120%
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 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
larger
larger
smaller
smaller
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>

參考資料