常用单位
| 单位 | 类型 | 描述 |
|---|---|---|
| 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
