【轉】CSS中px、em、rem、%、vw、vh單位
px、em、rem、%、vw、vh單位
1 、px
px就是pixel（畫素）的縮寫。但是在裝置本身上，PX 單元是固定的，不會根據任何其他元素進行更改。對於響應式站點，使用 PX 可能會出現問題，但它們對於保持某些元素的大小一致很有用。如果你有不應調整大小的元素，那麼使用 PX 是一個不錯的選擇。
2、em
參考物是父元素的font-size，具有繼承的特點。瀏覽器預設字型是16px，整個頁面內1em不是一個固定的值。
字型大小同樣都是1.5em，但是效果卻截然不同，按照W3C提供的公式，我們可以計算下： class為id1的div字型大小繼承自父元素body：16px*1.5em = 24px class為id2的div字型大小繼承自父元素id1：24px*1.5em = 36px class為id3的div字型大小繼承自父元素id2：36px*1.5em = 54px
3、rem
rem是CSS3新增的一個相對單位，但相對的只是HTML根元素。通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層複合的連鎖反應。
4、%
% 百分比，相對長度單位，相對於父元素的百分比值
元素寬高與字型大小使用區別：
（1）儘量使用相對尺寸單位
使用相對尺寸單位計量，則在調整頁面的佈局的時候，不需要遍歷所有的內部DOM結構，重新設定內部子元素的尺寸大小。如果是隨著父容器或者是整體頁面佈局而改變尺寸，則使用%更好，如元素的高度和寬度設定。
（2）字型尺寸儘量使用em、rem
為了字型大小的可維護性和伸縮性，推薦使用em，如果存在3層以及3層以上的字型相對尺寸的設定，可以考慮使用rem。
5、vw和vh
vm、vh、vmin、vmax是一種視窗單位，也是相對單位。它相對的不是父節點或者頁面的根節點。而是由視窗（Viewport）大小來決定的，單位 1，代表類似於 1%。 視窗(Viewport)是你的瀏覽器實際顯示內容的區域—，換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。
具體描述如下：
vw：視窗寬度的百分比（1vw 代表視窗的寬度為 1%）
vh：視窗高度的百分比
vmin：取當前Vw和Vh中較小的那一個值
vmax：取當前Vw和Vh中較大的那一個值
vh和vw相對於視口的高度和寬度， 1vh 等於1/100的視口高度，1vw 等於1/100的視口寬度 比如：瀏覽器高度900px，寬度為750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px， 很容易實現與同螢幕等高的框。
EM和REM的不同和使用場景
EM 和 REM 看起來完全相同。那麼它們有什麼不同呢？
簡而言之，它們因繼承而異。如前所述，REM 基於根元素 (HTML)。每個使用 REM 的子元素都將使用 HTML 根大小作為其計算點，無論父元素是否指定了任何不同的大小。
而 EM 是基於父元素的字型大小。如果父元素的大小與根元素不同，則 EM 計算將基於父元素而不是根元素。這意味著使用 EM 進行大小調整的巢狀元素有時最終會達到你沒有預料到的大小。如果你需要它來指定頁面特定區域的大小，它確實為你提供了更細粒度的控制。
%、VW 和 VH 都是關於什麼的？
PX、EM 和 REM 主要用於字型大小調整，而 %、VW 和 VH 主要用於邊距、填充、間距和寬度/高度。
重申一下，VH 代表“視口高度”，即可視螢幕的高度。100VH 將代表視口高度的 100%，或螢幕的整個高度。當然，VW 代表“視口寬度”，即可視螢幕的寬度。100VW 將代表視口寬度的 100%，或螢幕的整個寬度。% 反映父元素大小的百分比，與視口的大小無關。
更多關於 VW 和 VH
視口單位表示當前瀏覽器視口（當前瀏覽器大小）的百分比。雖然與 % 單位相似，但還是有區別的。視口單位計算為瀏覽器當前視口大小的百分比。而百分比單位計算為父元素的百分比，這可能與視口大小不同。
讓我們考慮一個 480 畫素 x 800 畫素的移動螢幕視口示例。
1 VW = 視口寬度的 1%（或 4.8px）
50 VW = 視口寬度的 50%（或 240px）
1 VH = 視口高度的 1%（或 8px）
50 VH = 視口高度的 50%（或 400px）
如果視口大小發生變化，元素的大小將分別發生變化。
什麼時候應該使用哪一個單位？
這個問題沒有完美的答案。一般來說，通常最好選擇一個相對單位而不是 PX，這樣你的網頁就有最好的機會呈現出精美的響應式設計。但是，如果你需要確保元素永遠不會在任何斷點處調整大小並且無論使用者是否選擇了不同的預設大小都保持不變，請選擇PX。即使不理想，PX 裝置也能確保一致的結果。
- EM相對於父元素的字型大小，因此如果你希望根據父元素的大小縮放元素的大小，請使用 EM。
- REM相對於根 (HTML) 字型大小，因此如果你希望根據根大小縮放元素的大小，無論父大小是什麼，請使用 REM。如果你使用過 EM 並且由於大量巢狀元素而發現大小問題，那麼 REM 可能是更好的選擇。
- VW可用於建立填充整個視口寬度的全寬元素 (100%)。當然，你可以使用視口寬度的任意百分比來實現其他目標，例如寬度的一半為 50% 等。
- VH可用於建立填充整個視口高度的全高元素 (100%)。當然，你可以使用視口高度的任意百分比來實現其他目標，例如高度的一半為 50% 等。
- %類似於 VW 和 VH，但它不是相對於視口的寬度或高度的長度。相反，它是父元素寬度或高度的百分比。例如，百分比單位通常可用於設定邊距的寬度。