{ 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等的区别