大小 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>

参考资料