HTML 尺寸单位

HTML 里有许多表示尺寸的单位，例如 px、pt、em、rem、%，有些时候甚至必须搭配特定的单位才能做出特定的效果，这篇教学会介绍 HTML 里的尺寸单位。

快速导览：

• “网页”和“印刷”的单位
• 网页中常使用的单位
• 网页文字专属单位
• 印刷单位

“网页”和“印刷”的单位

HTML 支援许多不同的单位，单位的类型可以简单分成“网页”和“印刷”两大类，通常对于 HTML 和 CSS 只会应用到网页的样式，打印网页时的印刷单位大多是辅助使用，毕竟真正要做印刷，还是建议使用排版软件来进行设计，下方列出 HTML 所支援的网页和印刷单位。

网页中常使用的单位

网页中常使用的单位有四种，分别是 px、em、rem 和 %。

• px：绝对单位，代表屏幕中每个“点”( pixel )。
• em：相对单位，每个子元素透过“倍数”乘以父元素“文字尺寸”的 px 值。
• rem：相对单位，每个元素透过“倍数”乘以根元素“文字尺寸”的 px 值。
• %：相对单位，每个子元素透过“百分比”乘以父元素的 px 值。

下方的网页打开后，网页里会有两个 200px x 200px 的 div，div 里都有一张皮卡丘图片 ( 图片来源 )，第一张的宽度设定为 100%，呈现出来就会是 200px ( 200 x 100% )，第二张图片则直接指定 100px，呈现出来的宽度就会是 100px ( 如果只有指定图片的宽度或高度，则另外一边未指定的宽度或高度会自动调整 )。

<style>
  div{
    border:1px solid #000;
    width:200px;
    height:200px;
  }
</style>
<div>
  <img style="width:100%;" src="https://tw.portal-pokemon.com/play/resources/pokedex/img/pm/2b3f6ff00db7a1efae21d85cfb8995eaff2da8d8.png">
</div>
<div>
  <img style="width:100px;" src="https://tw.portal-pokemon.com/play/resources/pokedex/img/pm/2b3f6ff00db7a1efae21d85cfb8995eaff2da8d8.png">
</div>

如果将图片的宽度单位设定为 em，则会以父元素 ( div ) 里“文字大小”作为基底乘以指定的倍数，1em 就是 40px ( 40px x 1 )，5em 则是 200px ( 40px x 5 )。

<style>
  div{
    border:1px solid #000;
    width:200px;
    height:200px;
    font-size:40px;
  }
</style>
<div>
  <img style="width:1em;" src="https://tw.portal-pokemon.com/play/resources/pokedex/img/pm/2b3f6ff00db7a1efae21d85cfb8995eaff2da8d8.png">
</div>
<div>
  <img style="width:5em;" src="https://tw.portal-pokemon.com/play/resources/pokedex/img/pm/2b3f6ff00db7a1efae21d85cfb8995eaff2da8d8.png">
</div>

网页文字专属单位

如果是针对网页里的“文字”，也可以直接使用专属的“名称”作为单位。

• 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%

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

印刷单位

通常印刷单位在 HTML 里比较少用 ( 因为转换成 px 时常有小数点和四舍五入，不容易处理 )，除非该网页有经过特别设计，在印刷时会另外套用印刷样式，才会使用相关印刷单位。

• 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。

小结

使用 HTML 单位时，最常用的就是 px、em、rem 和 % 四种，只要掌握彼此的相对关系，使用起来就能得心应手，更多相关信息可以参考：一次搞懂 CSS 字体单位：px、em、rem 和 %。

意见反馈