px、pt、%、em 和 rem

常用单位

单位 类型 描述
px Absolute 1个 Viewport 像素
pt Absolute 1pt = 1/72 英寸
pc Absolute 1pc = 12pt
% Relative 相对于父元素的字体尺寸
em Relative 相对于父元素的字体尺寸
rem Relative (即root em) 相对于html标签的字体尺寸
keyword Relative xx-small, x-small, small, medium, large, x-large, xx-large
vw Relative 相当于Viewport宽度的1/100
vh Relative 相当于Viewport高度的1/100
vmin Relative 相当于Viewport高宽中长度相对较小的1/100
vmax Relative 相当于Viewport高宽中长度相对较大的1/100

我们重点关注 px、pt、%、em 和 rem

实验

默认设定下:
100% = 1em = 1rem = 16px = 12pt

我们来实验一下,chrome 浏览器环境。

<html lang="zh">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
    body {
      text-align: center;
      margin-top: 50px;
      background-color: #efe1d6;
    }
    html {
      font-size: 100%;
    }
    body {
      font-size: 100%;
    }
      .px {
        font-size: 16px;
      }
      .pt {
        font-size: 12pt;
      }
      .percent {
        font-size: 100%;
      }
      .em {
        font-size: 1em;
      }
      .rem {
        font-size: 1rem;
      }
    </style>
  </head>
  <body>
    <p>html {font-size: 100%;}</p>
    <p>body {font-size: 100%;}</p>
    <p class="px">16px|这里是可以比较的文本内容</p>
    <p class="pt">12pt|这里是可以比较的文本内容</p>
    <p class="percent">100%|这里是可以比较的文本内容</p>
    <p class="em">1em|这里是可以比较的文本内容</p>
    <p class="rem">1rem|这里是可以比较的文本内容</p>
  </body>
</html>

下图可以看出,他们的大小是一样的,更改浏览器的缩放比例,他们也是同步放大或缩小的。

如果我们更改浏览器中的字号为小(极小的情况 chrome 做了特别的处理),这样的话,我们又会发现他们是不一样大的:

如果用调试工具去检查,会发现未做设置的字体大小和相对单位的字体大小都是 12px(100% 缩放比例下)

这是因为我们的根元素指定的是 100%,这时候他是相对于浏览器中设置的字号来渲染的。

如果改变 html 为 font-size:200%,可以看出,所有相对单位的字号是原先 100% 情况下的两倍。

em 与 rem

em 和 % 是等价的,他们都是相对于父元素的尺寸来计算尺寸的。而 rem 是相对于根元素的。相对于根元素的好处是,更改根元素的属性就可以轻易调整整个页面。

我们将浏览器的字号调整为 16px (默认),然后:

html {
  font-size: 100% /* =16px */
}
body {
  font-size: 2em; /* =32px */
}
p {
  font-size: 1em; /* =32px */
  /* font-size: 0.5em; =16px */
}

效果如下:

rem 相对于根元素所以只有 16px 其他则是 32 px

rem 的兼容

为了兼容不支持 rem 的浏览器(IE8及更早的版本),我们可以在使用 rem 的地方,前面加上对应的 px 值,这样就可以优雅降级了。
查询兼容性,可以参考 Can I use

参考文档

CSS中字体尺寸px pt em rem等的区别

发表评论

电子邮件地址不会被公开。 必填项已用*标注