CSS单位

开篇句： 年轻需要指定，不是指指点点

今天来说一哈css中单位，写了这么多css了，最熟悉的单位是什么？ px？em？ rem？ vw？vh？

CSS中的单位

css单位其实还不少，十几种。当然除了一些常用的，不常用的我们还是了解一哈塞。

绝对单位

1. px （Pixel）：这个是我们用得最多的了，就是屏幕上的一个像素点，相对于显示器屏幕的分辨率而言的。
2. pt（Points）：磅，1pt = 1/72in
3. pc（Picas）：1pc = 12pt = 1/6in
4. in（Inches）：英寸 1in=96px=2.54cm
5. cm（Centimeters）：厘米，96/2.54px
6. mm（Millimeters）：毫米，1mm = 1/10cm
7. q（Quarter-millimeters）：1q=1/4mm

   这些单位在打印的时候用得多，写css除了px，其他的用的很少哈。

相对单位

1. em，相对于当前节点字体的大小，如果当前dom没有设置font-size，则相对于父节点，默认1em=16px（现在浏览器的默认字体大小为16px），用em的好处的是，随着网页的放大，字体也会跟着放大，很多国外的网站都是用的em。但要注意，em可能会导致复杂的运算。

   举个例子： font-size: 20px; width: 2em; //这时候width就是40px。如果不指定font-size，就是32px；

2. rem，css3新属性，root rm，就是相对于跟节点，就是html嘛。
3. %，这个就很熟悉了嘛，相对于父元素来的。
4. vw，view width，视窗的宽度
5. vh，view height，视窗的高度

   vw，vh 移动端用得多些。

6. vmin：vw，vh中较小的那个。
7. vmax： vw，vh较大的那个。
8. ch，这个单位就有点儿不为人知了，表示数字 “0” 的宽度，我觉得这个单位一般和等宽字体（Consolas, Monaco, monospace）一起用，或则面试管叫你写一个刚好放10个0宽度的div，就是它了，width：10ch。找不到ch时，为0.5em
9. ex, 上面是0，这个是字母：x，无法确定时，也是 0.5em.

至于兼容性：can i use 一下吧