1.em
在做手機端的時候經常會用到的做字型的尺寸單位
說白了 em就相當於「倍」，比如設定當前的div的字型大小為1.5em，則當前的div的字型大小為：當前div繼承的字型大小*1.5
但是當div進行巢狀的時候，em始終是按照當前div繼承的字型大小來縮放，參照後面的例子。
2.rem
這裡的r就是root的意思，意思是相對於根節點來進行縮放，當有巢狀關係的時候，巢狀關係的元素的字型大小始終按照根節點的字型大小進行縮放。
參照後面給的demo
3.vh
vh就是當前螢幕可見高度的1%，也就是說
height:100vh == height:100%;
但是有個好處是當元素沒有內容時候，設定height:100%該元素不會被撐開，
但是設定height:100vh，該元素會被撐開螢幕高度一致。
4.vw
vw就是當前螢幕寬度的1%
補充一句，當設定width:100%，被設定元素的寬度是按照父元素的寬度來設定，
但是100vw是相對於螢幕可見寬度來設定的，所以會出現50vw 比50%大的情況
5. vh/vw
vh: 相對於視窗的高度, 視窗被均分為100單位的vh;
vw: 相對於視窗的寬度, 視窗被均分為100單位的vw;
vmax: 相對於視窗的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax;
vmin: 相對於視窗的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin;
視區所指為瀏覽器內部的可視區域大小，
即window.innerwidth/window.innerheight大小，不包含工作列標題欄以及底部工具欄的瀏覽器區域大小。
6.calc
calc是英文單詞calculate(計算)的縮寫，是css3的乙個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設定動態值。為何說是動態值呢?因為我們使用的表示式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度。
calc是 css3提供的乙個在css檔案中計算值的函式：
1. calc(100vh - 10px) 表示整個瀏覽器視窗高度減去10px的大小
2. calc(100vw - 10px) 表示整個瀏覽器視窗寬度減去10px的大小
一般用來設定流式布局寬高，當然，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設定動態值calc()的相容性如下，使用時需注意：
字型大小 1.2 * 14（父元素body） = 16px
字型大小 1.2 * 16(父元素em) = 20px
字型大小 1.2 * 20(父元素em-son) = 24px
字型大小 1.2 * 14（根節點html） = 16px
字型大小 1.2 * 14（根節點html） = 16px
字型大小 1.2 * 14（根節點html） = 16px
寬：14 * 10 = 140px
高：14 * 10 = 140px
寬：螢幕寬度的50%
高：螢幕高度的50%
css3 中的尺寸單位
1 em 它是我們常用的，經常用在字的大小上。它是大小是相對於父級的大小。1em 父級px 2 百分比 指的是相對於父級的，在定義標籤的width時會用 3 rem 它是em的增強版，ie9 它相對於根html來設定大小。不會像em，依賴於父級大小。一般都是 html 原因 頁面預設的大小是16px...
CSS尺寸單位 px em rem 詳解
在css中，尺寸單位分為兩類 相對長度單位和絕對長度單位。相對長度單位按照不同的參考元素，又可以分為字型相對單位和視窗相對單位。字型相對單位有 em ex ch rem 視窗相對單位有 vw vh vmin vmax幾種。絕對長度單位則是固定尺寸，它們採用的是物理度量單位 cm mm in px p...
CSS尺寸單位 px em rem 詳解
在css中，尺寸單位分為兩類 相對長度單位和絕對長度單位。相對長度單位按照不同的參考元素，又可以分為字型相對單位和視窗相對單位。字型相對單位有 em ex ch rem 視窗相對單位有 vw vh vmin vmax幾種。絕對長度單位則是固定尺寸，它們採用的是物理度量單位 cm mm in px p...