卡卡網(wǎng)

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

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

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

絕對(duì)單位

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

相對(duì)單位

EM : 相對(duì)于父元素

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

% : 相對(duì)于父元素

VW：相對(duì)于視口的寬度

VH : 相對(duì)于視口的高度

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

簡(jiǎn)單例子

讓我們看一個(gè)簡(jiǎn)單的例子。

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

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

你指定的數(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)大小怎么辦？由于這些是相對(duì)單位，因此最終尺寸值將基于新的基本尺寸。盡管默認(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)瀏覽器字體大小，同時(shí)仍然保持您指定的每個(gè)元素的相對(duì)比例。

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

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

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

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

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

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

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

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

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

讓我們考慮一個(gè) 480 像素 x 800 像素的移動(dòng)屏幕視口示例。

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

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

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

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

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

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

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

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

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

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

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

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

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