大家好庇楞，我是IT修真院上海分院第7期的學(xué)員榜配，一枚正直純潔善良的web前端。今天給大家分享一下吕晌，px蛋褥、em、rem睛驳、%烙心、vw、wh乏沸、vm等單位有什么區(qū)別淫茵？希望能夠給大家?guī)硪恍┦斋@和思考。
目錄
1.背景介紹? ? ? ? ??
2.知識剖析???????????
3.常見問題
4.解決方案????????
5.編碼實戰(zhàn)???????
6.擴展思考?????????
7.參考文獻??????
8.更多討論
1.背景介紹
傳統(tǒng)的項目開發(fā)中蹬跃，我們只會用到px匙瘪、%、em這幾個單位蝶缀，它可以適用于大部分的項目開發(fā)丹喻，并且擁有比較良好的兼容性。但從css3開始翁都，瀏覽器增加了rem碍论、vh、vw柄慰、vm等一些新的長度單位鳍悠，我們可以利用這些新的單位開發(fā)出比較良好的響應(yīng)式頁面，隨之覆蓋多種不同分辨率的終端坐搔，包括移動設(shè)備等〔匮校現(xiàn)在讓我們來認識一下這些長度單位。
2.知識剖析???
px：是顯示屏上顯示的每一個小點,為顯示的最小單位概行。這個長度與您正在看的顯示屏中的文字屏幕像素沒有任何關(guān)系蠢挡。
px像素（Pixel）值是固定的，不會隨著屏幕寬度變而變占锯。
em:是相對單位袒哥。em其實就是一種排版的測試單位.
在CSS中，“em”實際上是一個垂直測量消略。一個em等于任何字體中的字母所需要的垂直空間堡称，而和它所占據(jù)的水平空間沒有任何的關(guān)系，因此：如果字體大小是16px艺演，那么1em=16px却紧。在所有現(xiàn)代瀏覽器中桐臊，其默認的字體大小就是“16px”。但自身如果定義了font-size大小則按照自身來計算晓殊，也就是說整個頁面內(nèi)的em值并非完全一樣断凶。
rem:是一個相對的單位，像em巫俺，但它總是相對于“根”元素html的字體大小來計算认烁。em和rem的區(qū)別：em相對于父元素，rem相對于根元素介汹。這極大地簡化了與相關(guān)長度單位的合作却嗡。
%(percentage)以百分比形式設(shè)置的長度基于父元素的相同屬性的長度。例如嘹承，如果一個元素以450px寬度呈現(xiàn)窗价，寬度設(shè)置為50％的子元素將呈現(xiàn)225px。
vw-這是“視口寬度”單位叹卷。 1vw等于視口寬度的1％撼港。它與百分比類似，不同之處在于骤竹，所有元素的值都保持一致帝牡，無論其父元素或父元素寬度如何。
vh-這與vw（視口寬度）單位相同瘤载，只是它基于視口高度否灾。vmin and vmax：關(guān)于視口高度vh和寬度vw兩者的最小值或者最大值卖擅。
3.常見問題
css樣式body的font-size為什么要設(shè)置625%鸣奔？
4.解決方案??
16px62.5%=10px.*? ?設(shè)了62.5%后就有1em = 10px，這樣有利于進行換算惩阶。
?為什么要設(shè)置成625%挎狸？
?設(shè)置html 625% rem單位的根元素是相對于html body可以設(shè)置14px 或者16px 來設(shè)置網(wǎng)頁的默認字體大小消除625%大小屬性繼承給body帶來的影響
5.編碼實戰(zhàn)??
demo地址
7.參考文獻???
https://www.w3cplus.com/css/px-to-em
https://css-tricks.com/the-lengths-of-css/
8.更多討論
