{ Hello Magento 2 }

解决 Magento 2 应用问题，更注重深度挖掘。(ง •̀_•́)ง

0%

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 浏览器环境。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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 （默认），然后：

1
2
3
4
5
6
7
8
9
10
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等的区别