PX、EM、REM、%、VW 或 VH 這些CSS單位有什麼區别？什麼時候該用哪個？今天我們來了解一下。

讓我們從基礎開始，在CSS中，您可以使用各種度量單位指定元素的大小或長度，有些是絕對單位，有些是相對單位。

絕對單位：

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

相對單位：

EM：相對于父元素REM：相對于根元素（HTML 标簽）%：相對于父元素VW：相對于視口的寬度VH：相對于視口的高度與 PX 不同，%、EM 和 REM 等相對單位更适合響應式設計。相對單位在不同的設備上可以更好地縮放，因為它們可以根據另一個元素的大小進行縮放。

讓我們來看個例子

在大多數浏覽器中，默認字體大小為 16 像素。 相對單位從這個基礎計算大小。 如果您通過 CSS 為 HTML 标記設置基本尺寸來更改該基本尺寸，那麼更改的尺寸将成為計算整個頁面其餘部分的相對單位的基礎。 同樣，如果用戶調整了她的字體大小，那麼這将成為計算相對單位的基礎。那麼在處理默認的 16px 時，這些單位是什麼意思呢？

1em = 16px (1 * 16)2em = 32px (2 * 16).5em = 8px (.5 * 16)

1rem = 16px2rem = 32px.5rem = 8px

100% = 16px200% = 32px50% = 8px

但是如果您或用戶更改了默認大小怎麼辦？ 因為這些是相對單位，所以最終尺寸值将基于新的基本尺寸。 雖然默認值為 16 像素，但如果您或用戶将其更改為 14 像素，則計算出的尺寸最終将是：

1em = 14px (1 * 14)2em = 28px (2 * 14).5em = 7px (.5 * 14)

1rem = 14px2rem = 28px.5rem = 7px

100% = 14px200% = 28px50% = 7px這使用戶可以自由調整其默認浏覽器字體大小，同時仍保持您指定的每個元素的相對比例。

EM 和 REM有什麼區别?

查看上面的圖表，它顯示 EM 和 REM 看起來完全一樣。 那麼它們有什麼不同呢？

簡而言之，它們因繼承而異。 如前所述，REM 基于根元素 (HTML)。 然後，每個使用 REM 的子元素都将使用 HTML 根大小作為其計算點，而不管父元素是否指定了任何不同的大小。

另一方面，EM 基于父元素的字體大小。 如果父元素的大小與根元素的大小不同，則 EM 計算将基于父元素，而不是根元素。 這意味着使用 EM 進行大小調整的嵌套元素有時最終會達到您未預料到的大小。 另一方面，如果您需要它來指定頁面特定區域的大小，它确實為您提供了更細粒度的控制。

看下面的例子，如果parent沒有指定任何字體，那麼，他們都将根據相同的字體來計算長度，所以所有rem em都相等。

而如果給parent設置了不同的字體大小，情況就不同了，em會根據新的字體大小計算長度。在parent外面的div不受影響，如下圖。

什麼是VW和VH？

雖然 PX、EM 和 REM 主要用于字體大小，但 %、VW 和 VH 主要用于邊距、填充、間距和寬度/高度。

重申一下，VH 代表“視口高度”，即可視屏幕的高度。 100VH 表示視口高度的 100%，或屏幕的整個高度。當然，VW 代表“視口寬度”，即可視屏幕的寬度。 100VW 表示視口寬度的 100%，或屏幕的整個寬度。 % 反映了父元素大小的百分比，與視口的大小無關。

視口單位表示當前浏覽器視口（當前浏覽器大小）的百分比。雖然類似于 % 單位，但還是有區别的。 視口單位計算為浏覽器當前視口大小的百分比。 另一方面，百分比單位計算為父元素的百分比，這可能與視口大小不同。

讓我們考慮一個 480px x 800px 的移動屏幕視口示例。

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%) 很有用。當然，您可以使用視口寬度的任何百分比來實現其他目标，例如一半寬度的 50VW 等。

VH 對于創建填充整個視口高度的全高元素 (100%) 很有用。當然，您可以使用視口高度的任意百分比來實現其他目标，例如一半高度的 50VH 等。

% 類似于 VW 和 VH，但它不是相對于視口寬度或高度的長度。相反，它是父元素寬度或高度的百分比。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!