在 CSS 中，可以使用各種度量單位指定元素的大小或長度，如PX、EM、REM、%、VW 和 VH等，不過也許你還不十分了解，這些單位之間有什么區別？什么情況下該用什么單位？

 
CSS單位PX、EM、REM、%、VW 和 VH 有什么區別

了解不同單位的最重要方面是有些單位，例如 PX，是絕對單位，有些則是相對單位。

絕對單位

PX：像素 (px) 被視為絕對單位，盡管它們與查看設備的 DPI 和分辨率有關。但是在設備本身上，PX 單元是固定的，不會根據任何其他元素進行更改。對于響應式站點，使用 PX 可能會出現問題，但它們對于保持某些元素的大小一致很有用。如果你有不應調整大小的元素，那么使用 PX 是一個不錯的選擇。

相對單位

EM : 相對于父元素

REM : 相對于根元素（HTML 標簽）

% : 相對于父元素

VW：相對于視口的寬度

VH : 相對于視口的高度

與 PX 不同，%、EM 和 REM 等相對單位更適合響應式設計，也有助于滿足可訪問性標準。相對單位在不同設備上的縮放效果更好，因為它們可以根據另一個元素的大小進行縮放。

簡單例子

讓我們看一個簡單的例子。

在大多數瀏覽器中，默認字體大小為 16px。相對單位以此基數計算大小。如果你通過 CSS 為 HTML 標記設置基本大小來更改該基數，那么這將成為計算整個頁面其余部分的相對單位的基礎。同樣，如果用戶調整了他的字體大小，這將成為計算相對單位的基礎。

那么這些單位在處理默認的 16px 時意味著什么？

你指定的數字將乘以默認大小。

1em = 16px (1 * 16)

2em = 32px (2 * 16)

.5em = 8px (.5 * 16)

----------------------------------------

1rem = 16px

2rem = 32px

.5rem = 8px

----------------------------------------

100% = 16px

200% = 32px

50% = 8px

但是如果你或用戶更改了默認大小怎么辦？由于這些是相對單位，因此最終尺寸值將基于新的基本尺寸。盡管默認值為 16px，但如果你或用戶將其更改為 14px，則計算出的大小最終將是：

1em = 14px (1 * 14)

2em = 28px (2 * 14)

.5em = 7px (.5 * 14)

----------------------------------------

1rem = 14px

2rem = 28px

.5rem = 7px

----------------------------------------

100% = 14px

200% = 28px

50% = 7px

這使用戶可以自由調整她的默認瀏覽器字體大小，同時仍然保持您指定的每個元素的相對比例。

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，但它不是相對于視口的寬度或高度的長度。相反，它是父元素寬度或高度的百分比。例如，百分比單位通常可用于設置邊距的寬度。

標簽: css  css3  css單位  PX  EM  REM  VW  VH