CSS3单位

em

做前端的应该对em不陌生，不是什么罕见的单位，是相对单位，参考物是父元素的font-size，具有继承的特点。如果字体大小是16px（浏览器的默认值），那么 1em = 16px。

不过，这样使用很复杂，很难很好的与px进行对应，因此，前端开发的前辈们总结了一个经验

body {
font-size: 62.5%;
}

那么，这样之后 1em = 10px 在布局等使用的时候好换算了很多。
百分比

百分比相信大家更不会陌生了，百分比一般宽泛的讲是相对于父元素，但是并不是十分准确。

    1、对于普通定位元素就是我们理解的父元素

    2、对于position: absolute;的元素是相对于已定位的父元素（offset parent）

    3、对于position: fixed;的元素是相对于 ViewPort

viewport：可视窗口，也就是浏览器的window那么大。

例外情况

    1、使用了padding、margin 等，实际百分比和你想要的百分比是有区别的。（关于这个，解决方法之一，就是我们可以使用css3的calc()属性，具体，您请继续往下看，在文章最后我会解释。）

    2、line-height百分比的一些情况，通常结果是百分比 计算后的值。（关于这个，您请继续往下看。。。）

rem

rem支持IE9及以上，意思是相对于根元素html（网页），不会像em那样，依赖于父元素的字体大小，而造成混乱。使用起来安全了很多。

html {font-size: 62.5%; /**10 ÷ 16 × 100% = 62.5%    1rem = 10px   **/}
body {font-size: 1.4rem; /**1.4 × 10px = 14px **/}
h1 { font-size: 2.4rem; /**2.4 × 10px = 24px**/}

这样整个网页都会比较统一！不会造成混乱！

vh 和 vw

IE10＋ 和现代浏览器都支持这两个单位。

    vw Viewport宽度， 1vw 等于viewport宽度的1%

    vh Viewport高度， 1vh 等于viewport高的的1%

vw和vh会随着viewport变化自动变化，再也不用js控制全屏了。

甚至有些人丧心病狂的字体大小都用vw和vh控制，来达到字体和viewport大小同步的效果。

vmin和vmax

IE10+ 和现代浏览器都已经支持vmin

webkit浏览器之前不支持vmax，新版已经支持，所有现代浏览器已经支持，但是IE 全部 不支持vmax

    vmin vw和vh中比较 小 的值

    vmax vw和vh中比较 大的值

这两个属性也会随着viewport变化
ch和ex

IE9+ 和现代浏览器都已经支持,这两个单位时根据 当前font-family 的相对单位。

    ch 字符0的宽度

    ex 小写字符x的高度

当font-family改变的时候这两个单位的值也会变化，不同字体表现的样式不一样。