扶今追昔
CSS中的單位我們經常用到px、pt、em、百分比，px和pt不用多說
em
em是相對單位，參考物是父元素的font-size，具有繼承的特點
如果字體大小是16px（瀏覽器的默認值），那么 1em = 16px
這樣使用換算很復雜，尤其是和px對應，大家總結出了經驗
body {
font-size: 62.5%;
}
這樣之后 1em = 10px 在布局等使用的時候好換算了很多
百分比
百分比也是很常見的用法，看似簡單其實有些初學者可能注意不到的知識
相對於誰
首先要明確百分比是相對於誰，寬泛的講是父元素，但是並不是十分准確
- 對於普通定位元素就是我們理解的父元素
- 對於
position: absolute;的元素是相對於已定位的父元素（offset parent） - 對於
position: fixed;的元素是相對於 ViewPort
viewport：可視窗口，也就是瀏覽器的window那么大
意外
- padding、margin 如果設置了百分比，會發現左右和預期一樣，用的父元素寬度的百分比，但是用的也是 ** 寬度 ** 百分比，而不是想象中的高度的百分比
- 后代元素繼承的是百分比 計算后的值 ，而不是原百分比，這個對於
line-height的時候經常會遇到坑，還有這樣的面試題問你line-height設置為120%和1.2的區別
CSS3開啟新時代
rem
em是個很不錯的單位，但是有個問題就是可能會帶來混亂，因為em依賴於父元素的字體大小，各個元素父元素的字體尺寸不一定一樣，會帶來布局上很大的不確定性
rem font size of the root element
rem相對於根元素html（網頁），這樣使用起來就安全了很多
html {font-size: 62.5%; /10 ÷ 16 × 100% = 62.5%/}
body {font-size: 1.4rem; /1.4 × 10px = 14px /}
h1 { font-size: 2.4rem; /2.4 × 10px = 24px/}
IE9+ 和現代瀏覽器都已經支持了
vw和vh
vwViewport寬度， ** 1vw ** 等於viewport寬度的1%vhViewport高度， ** 1vh ** 等於viewport高的的1%
vw和vh會隨着viewport變化自動變化，再也不用js控制全屏神馬的了
甚至有些人喪心病狂的字體大小都用vw和vh控制，來達到字體和viewport大小同步的效果
IE10＋ 和現代瀏覽器都支持這兩個單位
vmin和vmax
這兩個單位是針對vw和vh
vminvw和vh中比較 ** 小 ** 的值vmaxvw和vh中比較 ** 大 ** 的值
這兩個屬性也會隨着viewport變化
IE10+ 和現代瀏覽器都已經支持vmin
webkit瀏覽器之前不支持vmax，現在已經支持，所有現代瀏覽器已經支持，但是IE ** 全部 ** 不支持vmax
ch和ex
這兩個單位時根據 ** 當前font-family ** 的相對單位
ch字符0的寬度ex小寫字符x的高度
當font-family改變的時候這兩個單位的值也會變化，不同字體表現的樣式不一樣
IE9+ 和現代瀏覽器都已經支持
瀏覽器兼容性
寫的時候介紹了一些，大神寫了測試頁面可以幫我們直觀的看到
http://s.codepen.io/chriscoyier/fullgrid/CiwFD?type=embed&safe=true