卡卡網(wǎng)

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

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

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

絕對單位

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

相對單位

EM : 相對于父元素

REM : 相對于根元素（HTML 標(biāo)簽）

% : 相對于父元素

VW：相對于視口的寬度

VH : 相對于視口的高度

與 PX 不同，%、EM 和 REM 等相對單位更適合響應(yīng)式設(shè)計(jì)，也有助于滿足可訪問性標(biāo)準(zhǔn)。相對單位在不同設(shè)備上的縮放效果更好，因?yàn)樗鼈兛梢愿鶕?jù)另一個元素的大小進(jìn)行縮放。

簡單例子

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

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

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

你指定的數(shù)字將乘以默認(rèn)大小。

1em = 16px (1 * 16)

2em = 32px (2 * 16)

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

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

1rem = 16px

2rem = 32px

.5rem = 8px

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

100% = 16px

200% = 32px

50% = 8px

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

1em = 14px (1 * 14)

2em = 28px (2 * 14)

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

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

1rem = 14px

2rem = 28px

.5rem = 7px

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

100% = 14px

200% = 28px

50% = 7px

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

EM 和 REM 有什么區(qū)別？

EM 和 REM 看起來完全相同。那么它們有什么不同呢？

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

而 EM 是基于父元素的字體大小。如果父元素的大小與根元素不同，則 EM 計(jì)算將基于父元素而不是根元素。這意味著使用 EM 進(jìn)行大小調(diào)整的嵌套元素有時最終會達(dá)到你沒有預(yù)料到的大小。如果你需要它來指定頁面特定區(qū)域的大小，它確實(shí)為你提供了更細(xì)粒度的控制。

%、VW 和 VH 都是關(guān)于什么的？

PX、EM 和 REM 主要用于字體大小調(diào)整，而 %、VW 和 VH 主要用于邊距、填充、間距和寬度/高度。

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

更多關(guān)于 VW 和 VH

視口單位表示當(dāng)前瀏覽器視口（當(dāng)前瀏覽器大小）的百分比。雖然與 % 單位相似，但還是有區(qū)別的。視口單位計(jì)算為瀏覽器當(dāng)前視口大小的百分比。而百分比單位計(jì)算為父元素的百分比，這可能與視口大小不同。

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

1 VW = 視口寬度的 1%（或 4.8px）

50 VW = 視口寬度的 50%（或 240px）

1 VH = 視口高度的 1%（或 8px）

50 VH = 視口高度的 50%（或 400px）

如果視口大小發(fā)生變化，元素的大小將分別發(fā)生變化。

什么時候應(yīng)該使用哪一個單位？

這個問題沒有完美的答案。一般來說，通常最好選擇一個相對單位而不是 PX，這樣你的網(wǎng)頁就有最好的機(jī)會呈現(xiàn)出精美的響應(yīng)式設(shè)計(jì)。但是，如果你需要確保元素永遠(yuǎn)不會在任何斷點(diǎn)處調(diào)整大小并且無論用戶是否選擇了不同的默認(rèn)大小都保持不變，請選擇PX。即使不理想，PX 裝置也能確保一致的結(jié)果。

EM相對于父元素的字體大小，因此如果你希望根據(jù)父元素的大小縮放元素的大小，請使用 EM。

REM相對于根 (HTML) 字體大小，因此如果你希望根據(jù)根大小縮放元素的大小，無論父大小是什么，請使用 REM。如果你使用過 EM 并且由于大量嵌套元素而發(fā)現(xiàn)大小問題，那么 REM 可能是更好的選擇。

VW可用于創(chuàng)建填充整個視口寬度的全寬元素 (100%)。當(dāng)然，你可以使用視口寬度的任意百分比來實(shí)現(xiàn)其他目標(biāo)，例如寬度的一半為 50% 等。

VH可用于創(chuàng)建填充整個視口高度的全高元素 (100%)。當(dāng)然，你可以使用視口高度的任意百分比來實(shí)現(xiàn)其他目標(biāo)，例如高度的一半為 50% 等。

%類似于 VW 和 VH，但它不是相對于視口的寬度或高度的長度。相反，它是父元素寬度或高度的百分比。例如，百分比單位通?？捎糜谠O(shè)置邊距的寬度。

標(biāo)簽: css  css3  css單位  PX  EM  REM  VW  VH