常用单位
下面是对这些单位的一个简单整理:
| 单位 | 类型 | 描述 |
|---|---|---|
| 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和vw。
它们之间有什么区别？
从概念上很难理解这些单位之间的差别，所以下面用一些实例来说明。
例1. 默认设定
当你不设定字体尺寸时，HTML会提供一个默认的尺寸设定。大多数浏览器中<html>和<body>标签中的默认字体尺寸是100%，没有概念？看这个等式：
100% = 1em = 1rem = 16px = 12pt
还是不懂？那就换个说法，比如说你给一个<p>设置字体尺寸为100%，给另一个<p>设置为16px，在屏幕上看到的这两个<p>中的字体大小是一样的，下图列出了用几个不同单位设置的字体尺寸，可以看出是一样大的：
2362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
