一酸舍、介紹
傳統(tǒng)的項(xiàng)目開發(fā)中啃勉，我們只會用到px、%淮阐、em這幾個(gè)單位泣特，它可以適用于大部分的項(xiàng)目開發(fā)，且擁有比較良好的兼容性
從CSS3開始勒叠，瀏覽器對計(jì)量單位的支持又提升到了另外一個(gè)境界，新增了rem缴饭、vh、vw担猛、vm等一些新的計(jì)量單位
利用這些新的單位開發(fā)出比較良好的響應(yīng)式頁面傅联，適應(yīng)多種不同分辨率的終端，包括移動設(shè)備等
二蒸走、單位
1. px
1比驻、px岛抄，表示像素夫椭，所謂像素就是呈現(xiàn)在我們顯示器上的一個(gè)個(gè)小點(diǎn)氯庆，每個(gè)像素點(diǎn)都是大小等同的，所以像素為計(jì)量單位被分在了絕對長度單位中
2仁讨、有些人會把px認(rèn)為是相對長度洞豁，原因在于在移動端中存在設(shè)備像素比屠橄，px實(shí)際顯示的大小是不確定的
這里之所以認(rèn)為px為絕對單位，在于px的大小和元素的其他屬性無關(guān)
2. vh礁哄、vw
vw 溪北，就是根據(jù)窗口的寬度之拨，分成100等份，100vw就表示滿寬蚀乔，50vw就表示一半寬吉挣。（vw 始終是針對窗口的寬），同理睬魂，vh則為窗口的高度
這里的窗口分成幾種情況：
1、在桌面端际跪，指的是瀏覽器的可視區(qū)域
2、移動端指的就是布局視口
像vw良姆、vh穴肘，比較容易混淆的一個(gè)單位是%，不過百分比寬泛的講是相對于父元素：
對于普通定位元素就是我們理解的父元素
對于position: absolute;的元素是相對于已定位的父元素
對于position: fixed;的元素是相對于 ViewPort（可視窗口）
3. rem
rem豹缀，相對單位邢笙，相對的只是HTML根元素font-size的值
同理侍匙，如果想要簡化font-size的轉(zhuǎn)化想暗，我們可以在根元素html中加入font-size: 62.5%
html {font-size: 62.5%; } /* 公式16px*62.5%=10px */
這樣頁面中1rem=10px说莫、1.2rem=12px、1.4rem=14px储狭、1.6rem=16px;使得視覺辽狈、使用、書寫都得到了極大的幫助
特點(diǎn)：
1刮萌、rem單位可謂集相對大小和絕對大小的優(yōu)點(diǎn)于一身
2着茸、和em不同的是rem總是相對于根元素，而不像em一樣使用級聯(lián)的方式來計(jì)算尺寸
4. em
1、em是相對長度單位澎语。相對于當(dāng)前對象內(nèi)文本的字體尺寸擅羞。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸（1em = 16px）
2召烂、為了簡化 font-size 的換算娃承，我們需要在css中的 body 選擇器中聲明font-size= 62.5%，這就使 em 值變?yōu)?16px*62.5% = 10px
這樣 12px = 1.2em, 10px = 1em, 也就是說只需要將你的原來的px 數(shù)值除以 10酗昼，然后換上 em作為單位就行了
特點(diǎn)：
1.em 的值并不是固定的
2.em 會繼承父級元素的字體大小
3.em 是相對長度單位麻削。相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置呛哟，則相對于瀏覽器的默認(rèn)字體尺寸
4.任意瀏覽器的默認(rèn)字體高都是 16px
三扫责、總結(jié)
px：絕對單位公给，頁面按精確像素展示
em：相對單位蜘渣，基準(zhǔn)點(diǎn)為父節(jié)點(diǎn)字體的大小蔫缸，如果自身定義了font-size按自身來計(jì)算拾碌， 整個(gè)頁面內(nèi)1em不是一個(gè)固定的值
rem：相對單位校翔，可理解為root em, 相對根節(jié)點(diǎn)html的字體大小來計(jì)算
vh、vw：主要用于頁面視口大小布局孟辑，在頁面布局上更加方便簡單
