大家好，我是IT修真院上海分院3期的學(xué)員，一枚正直純潔善良的web前端程序員
今天給大家分享一下，修真院官網(wǎng)css任務(wù)3的知識點——px、em、rem、%、vw、wh、vm等單位有什么區(qū)別？
1.背景介紹
在編寫Web網(wǎng)頁中，長度單位是非常常用的一個單位。通過設(shè)置長度單位對頁面的內(nèi)容進行調(diào)整，來達到符合要求或者說看上去舒服的排版效果。傳統(tǒng)的單位有：px、%、em，而隨著技術(shù)的發(fā)展，css3增加了一些新的單位rem、vh、vw、vm等，使我們的web頁面能適應(yīng)各種不同的終端顯示，現(xiàn)在我們來去看下他們的意義和不同點。
2.知識剖析
2.1 px
px是Pixel的縮寫，表示像素，所謂像素就是呈現(xiàn)在我們顯示器上的一個個小點，每個像素點都是大小等同的，所以像素為計量單位被分在了絕對長度單位中。
2.2?em
相對長度單位。em是相對于當前對象內(nèi)文本的字體尺寸而計算的。如果當前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認字體(16px)尺寸。也就是1em=16px。
2.3 rem
rem和em很像，只不過一個計算的規(guī)則是依賴根元素一個是依賴父元素計算。
em是相對于其父元素來設(shè)置字體大小的，這樣就會存在一個問題，進行任何元素設(shè)置，都有可能需要知道他父元素的大小。而rem是相對于根元素html，這樣就意味著，我們只需要在根元素確定一個參考值，從而統(tǒng)一整個頁面的長度。
需要注意的是，我們經(jīng)常用的谷歌瀏覽器會強制頁面的最小字體為12號，即使設(shè)置成 10px 最終都會顯示成12px。既然html{font-size：62.5%}辦不到，那換個思路，將html{font-size：625%}怎么樣。
2.4 ?百分比%
百分比%就是相對于父元素尺寸來進行計算的，比如定義兩個div元素,div1包含div2,設(shè)置父div1的width為100px,子div2的width為50%,則實際上計算的結(jié)果就是：子div2的寬度是100px*50% = 50px。
1、如果用來設(shè)置字體，相對的是父元素的字體大小，大多數(shù)瀏覽器中默認的字體尺寸是100%。
2、如果用來設(shè)置寬和高等非字體尺寸，則以百分比為單位的長度值是基于具有相同屬性的父元素的長度值。
2.5?vw
vw是視窗寬度單位。1vw等于可視區(qū)寬度的百分之一。如果瀏覽器的寬是 500px, 1vw求得的值為 5px 。
2.6 vh
vh是視窗高度單位。1vh等于可視區(qū)高度的百分之一。如果瀏覽器的高是 800px, 1vh 求得的值為 8px 。
2.7 vmax
vmax是相對于視窗的寬度或高度的百分之一，取決于哪個更大。在寬為500px高為800px分辨率的顯示器下1vm=8px。
2.8 vmin
vmin是相對于視窗的寬度或高度的百分之一，取決于哪個更小。在寬為500px高為800px分辨率的顯示器下1vm=5px。
3.常見問題
為什么給body的CSS樣式設(shè)置font-size為62.5%？
4. 解決方案
任意瀏覽器的默認字體高都是16px。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。為了簡化font-size的換算，所以需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數(shù)值除以10，然后換上em作為單位就行了。
5.編碼實戰(zhàn)
6.擴展思考
除了這些單位還有什么其他的單位？
ex：相對長度單位。相對于字符“x”的高度。此高度通常為字體尺寸的一半。如當前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認字體尺寸。
pt：點（Point），絕對長度單位。大約1/72寸.
pc：派卡（Pica），絕對長度單位。大約6pt，1/6寸,相當于我國新四號鉛字的尺寸。
in：英寸（Inch），絕對長度單位。
mm：毫米（Millimeter），絕對長度單位。
cm：厘米（Centimeter），絕對長度單位。
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
7.參考文獻
參考1：徹底了解css中的長度單位
參考2：視窗單位 vs 百分比單位
參考3：搞清楚CSS單位px、em、rem、vh、vw、vmin、vmax
PPT
px、em、rem、%、vw、wh、vm等單位有什么區(qū)別？
