原文出處：https://blog.csdn.net/jnshu_it/article/details/77161717 (本文有修改）

1.背景介紹

傳統的專案開發中，我們只會用到px、%、em這幾個單位，它可以適用於大部分的專案開發，並且擁有比較良好的相容性。但是你知道嗎？從css3開始，瀏覽器對邏輯單位的支援又提升到了另外一個境界，增加了rem、vh、vw、vmin、vmax等一些新的長度單位，我們可以利用這些新的單位開發出比較良好的響應式頁面，隨之覆蓋多種不同解析度的終端，包括移動裝置等。現在讓我們來看下這些長度單位有什麼區別。

2.知識剖析

1、px

px就是pixel的縮寫，意為畫素。px就是一張圖片最小的一個點，一張點陣圖就是千千萬萬的這樣的點構成的，比如常常聽到的電腦畫素是1024x768的，表示的是水平方向是1024個畫素點，垂直方向是768個畫素點。

2、em

參考物是父元素的font-size，具有繼承的特點。如果自身定義了font-size按自身來計算（瀏覽器預設字型是16px），整個頁面內1em不是一個固定的值。

3、rem

css3新單位，相對於根元素html（網頁）的font-size，不會像em那樣，依賴於父元素的字型大小，而造成混亂。
（坑：當html的font-size 小於12px時，rem計算的結果不對，編大， 見下面的補充）

4、%

一般寬泛的講是相對於父元素，但是並不是十分準確。

1、對於普通定位元素就是我們理解的父元素

2、對於position: absolute;的元素是相對於已定位的父元素

3、對於position: fixed;的元素是相對於ViewPort（可視視窗）

5、vw

css3新單位，viewpoint width的縮寫，視窗寬度，1vw等於視窗寬度的1%。

舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。

6、vh

css3新單位，viewpoint height的縮寫，視窗高度，1vh等於視窗高度的1%。

舉個例子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px。

7、vmin   (相容性較差)

css3新單位，當前較小的vw和vh

8、vmax  (相容性較差)

css3新單位，當前較大的vw和vh

3.注意

1、vh vw 是不包含頁面滾動條的視窗寬度(innerwidth)

2、% 包含了滾動條的寬度在裡面了(outerwidth)。

一般的情況下%就可以滿足大部分自適應設計的需求，可以用height：100vh做一個高度佔滿螢幕的自適應，沒有滾動條。

用vw，vh設定的大小隻和視窗大小有關，所以用來開發多種螢幕裝置的應用用這個單位還是挺合適的。

【補充：用rem時要注意】
當html的font-size 小於12px時，rem計算的結果不對，編大，這是Chrome執行的效果

反而遭人嫌棄的IE沒有這個問題， 見下圖

要想知道各個單位的相容性問題可能去：https://caniuse.com 進行查詢