PX、EM、REM、%、VW 或 VH 這些CSS單位有什么區(qū)別？什么時候該用哪個？今天我們來了解一下。
讓我們從基礎(chǔ)開始，在CSS中，您可以使用各種度量單位指定元素的大小或長度，有些是絕對單位，有些是相對單位。
絕對單位：
PX：像素 (px) 被視為絕對單位，盡管它們與查看設(shè)備的 DPI 和分辨率有關(guān)。 但是在設(shè)備本身上，PX 單元是固定的，不會基于任何其他元素而改變。 對于響應(yīng)式站點(diǎn)來說，使用 PX 可能會有問題，但它們對于保持某些元素的大小一致很有用。 如果您有不應(yīng)該調(diào)整大小的元素，那么使用 PX 是一個不錯的選擇。
相對單位：
EM：相對于父元素
REM：相對于根元素（HTML 標(biāo)簽）
%：相對于父元素
VW：相對于視口的寬度
VH：相對于視口的高度
與 PX 不同，%、EM 和 REM 等相對單位更適合響應(yīng)式設(shè)計(jì)。相對單位在不同的設(shè)備上可以更好地縮放，因?yàn)樗鼈兛梢愿鶕?jù)另一個元素的大小進(jìn)行縮放。
讓我們來看個例子
在大多數(shù)瀏覽器中，默認(rèn)字體大小為 16 像素。 相對單位從這個基礎(chǔ)計(jì)算大小。 如果您通過 CSS 為 HTML 標(biāo)記設(shè)置基本尺寸來更改該基本尺寸，那么更改的尺寸將成為計(jì)算整個頁面其余部分的相對單位的基礎(chǔ)。 同樣，如果用戶調(diào)整了她的字體大小，那么這將成為計(jì)算相對單位的基礎(chǔ)。那么在處理默認(rèn)的 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
但是如果您或用戶更改了默認(rèn)大小怎么辦？ 因?yàn)檫@些是相對單位，所以最終尺寸值將基于新的基本尺寸。 雖然默認(rèn)值為 16 像素，但如果您或用戶將其更改為 14 像素，則計(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ì)粒度的控制。
看下面的例子，如果parent沒有指定任何字體，那么，他們都將根據(jù)相同的字體來計(jì)算長度，所以所有rem em都相等。
而如果給parent設(shè)置了不同的字體大小，情況就不同了，em會根據(jù)新的字體大小計(jì)算長度。在parent外面的div不受影響，如下圖。
什么是VW和VH？
雖然 PX、EM 和 REM 主要用于字體大小，但 %、VW 和 VH 主要用于邊距、填充、間距和寬度/高度。
重申一下，VH 代表“視口高度”，即可視屏幕的高度。 100VH 表示視口高度的 100%，或屏幕的整個高度。當(dāng)然，VW 代表“視口寬度”，即可視屏幕的寬度。 100VW 表示視口寬度的 100%，或屏幕的整個寬度。 % 反映了父元素大小的百分比，與視口的大小無關(guān)。
視口單位表示當(dāng)前瀏覽器視口（當(dāng)前瀏覽器大小）的百分比。雖然類似于 % 單位，但還是有區(qū)別的。 視口單位計(jì)算為瀏覽器當(dāng)前視口大小的百分比。 另一方面，百分比單位計(jì)算為父元素的百分比，這可能與視口大小不同。
讓我們考慮一個 480px x 800px 的移動屏幕視口示例。
1 VW = 視口寬度的 1%（或 4.8px）
50 VW = 視口寬度的 50%（或 240px）
1 VH = 視口高度的 1%（或 8px）
50 VH = 視口高度的 50%（或 400px）
如果視口大小發(fā)生變化，元素的大小也會相應(yīng)變化。
結(jié)論：
什么時候改用什么單位呢？
歸根結(jié)底，這個問題沒有完美的答案。一般來說，通常最好選擇相對單位之一而不是 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)，例如一半寬度的 50VW 等。
VH 對于創(chuàng)建填充整個視口高度的全高元素 (100%) 很有用。當(dāng)然，您可以使用視口高度的任意百分比來實(shí)現(xiàn)其他目標(biāo)，例如一半高度的 50VH 等。
% 類似于 VW 和 VH，但它不是相對于視口寬度或高度的長度。相反，它是父元素寬度或高度的百分比。
好了，這篇文章的內(nèi)容發(fā)貨聯(lián)盟就和大家分享到這里，如果大家網(wǎng)絡(luò)推廣引流創(chuàng)業(yè)感興趣，可以添加微信：80709525 備注：發(fā)貨聯(lián)盟引流學(xué)習(xí)； 我拉你進(jìn)直播課程學(xué)習(xí)群，每周135晚上都是有實(shí)戰(zhàn)干貨的推廣引流技術(shù)課程免費(fèi)分享！
