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%大的情況
字型大小 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%
字型大小 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%
詳解css中的em單位
em是相對長度單位，相對於當前物件內文字的字型尺寸，也就是font size設定的大小。它的單位長度是根據元素的文字文字垂直長度來決定的。如當前對行內文字的字型尺寸未被人為設定，則尋找父級的font size,如果沒有父級或者父級沒有設定font size,就相對於瀏覽器的預設字型尺寸 16px 例...
HTML中單位em和px
最近開始 搞html5，因為以前寫後台程式比較多，前端也只是馬虎馬虎寫寫。一下子要惡補許多css的知識。覺得單位是最基本的，就從單位搞起 字型單位應該用em而不用px，原因簡單來說就是支援ie6下的字型縮放，在頁面中按ctrl 滾輪，字型以px為單位的 沒有反應。px是絕對單位，不支援ie的縮放，e...
HTML中單位em和px
最近開始 搞html5，因為以前寫後台程式比較多，前端也只是馬虎馬虎寫寫。一下子要惡補許多css的知識。覺得單位是最基本的，就從單位搞起 字型單位應該用em而不用px，原因簡單來說就是支援ie6下的字型縮放，在頁面中按ctrl 滾輪，字型以px為單位的 沒有反應。px是絕對單位，不支援ie的縮放，e...