CSS 的 `vh/vw` 和 `%` 單位之間的主要差異是什麼？

CSS 單位中vh/vw 和% 的區別

vh 和vw 等CSS 單位為開發者提供了定義元素的多種選項相對於視口的尺寸。然而，它們與更傳統的 % 單位的相似性可能會引發對其獨特性的疑問。

理解 vh 和 vw

vh（視口高度）和 vw（視口寬度）是分別表示查看區域的高度和寬度的百分比的單位。例如，100vw 表示視口寬度的 100%，無論裝置的實際螢幕尺寸為何。

與 %

比較乍一看，vh/vw 單位似乎多餘的，因為 % 也代表某些父元素的百分比。然而，關鍵的差異在於參考框架。

高度與視口高度

% 單位通常測量相對於其父元素高度的尺寸。例如，無論視窗的大小如何，高度為 100% 的子元素都會佔據其父元素的整個高度。

相反，vh 和 vw 單位測量相對於視口的高度和寬度的尺寸。這意味著 100vh 元素將始終佔據視窗高度的 100%，無論其父元素的大小如何。

範例

考慮具有高度的父 div 元素200px 且子 div 元素設定為 100% 高度。雖然 100% 通常意味著“父級的 100%”，但在這種情況下，子 div 可能會超出視窗的高度。

但是，如果子 div 設定為 100vh，它將始終佔據100% 的視口高度，確保在不同視窗尺寸上實現完全響應且一致的佈局。

以上是CSS 的 `vh/vw` 和 `%` 單位之間的主要差異是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！