css的各种单位
我常用的单位无非px，rem，deg等等，但今天看到了vw，vh，vm这样的单位，遂决定总结一下。
关于单位的相关来自张鑫旭大神，在我的理解上做了些补充~
| 单位 | 含义 |
|---|---|
| em | 相对于父元素的字体大小，若父元素font-size为16px，那么1em就为16px |
| ex | 相对于小写字母"x"的高度 |
| gd | 一般用在东亚字体排版上，这个与英文并无关系 |
| rem | 相对于根元素字体大小，若根元素font-size为16px，那么1em就为16px |
| vw | 相对于视窗的宽度：视窗宽度是100vw |
| vh | 相对于视窗的高度：视窗高度是100vh |
| vm | 相对于视窗的宽度或高度，取决于哪个更小 |
| ch | 1ch的大小和字母o的宽度相等 |
| px | 相对于屏幕分辨率而不是视窗大小：通常为1个点或1/72英寸 |
| in | inch, 表英寸 |
| cm | centimeter, 表厘米 |
| mm | millimeter, 表毫米 |
| pt | 磅，1/72英寸，绝对长度单位 |
| pc | 12点活字，或1/12点，绝对长度单位 |
| % | 相对于父元素。正常情况下是通过属性定义自身或其他元素 |
| 单位 | 含义 |
|---|---|
| deg | degrees, 角度，一个圆360度 |
| grad | grads, 梯度，一个圆400梯度 |
| rad | radians, 弧度，一个圆2π弧度 |
| turn | turns, 圈数，一个圆共一圈 |
| ms | milliseconds, 毫秒数 |
| s | seconds, 秒数 |
| Hz | Hertz, 赫兹 |
| kHz | kilohertz, 千赫 |
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
vw，vh，vm：
- 为css3新单位。
- 所提到的视窗：“视区”所指为浏览器内部的可视区域大小，即
window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。 - 可用来做响应式布局。如设置宽度为20vw，高度为40vh，表示当前元素在任何屏幕下都是div占当前屏幕宽度的20%，当前高度的40%。但兼容性不好，使用并不广泛。
ex：
ex单位被定义为”当前字体的x-height或者一个em的一半”。给定的字体的x-height是指那个字体的小写x的高度。通常，这是这个字体的中间的标志。
ch：
给定一个等宽字体的字体，一个N个字符单位宽的盒子，比如width：40ch;,可以一直容纳一个有40个字符的应用那个特定字体的字符串。