CSS 单位 `vh`/`vw` 和 `%` 之间的主要区别是什么？

CSS 单位：探索 vh/vw 和 % 之间的差异

简介

中在 CSS 样式领域，可以使用多种单位来定义元素尺寸。其中，vh 和 vw 是相对较新的单位，由于它们与更常见的百分比单位相似，因此引起了一些混乱。本文探讨了这些单位之间的根本区别，以阐明它们独特的应用场景。

vh 和 vw：视口的百分比

正如问题所示， vh（视口高度）和 vw（视口宽度）分别是测量当前视口高度和宽度百分比的单位。例如，100vh 表示当前视口高度的 100%。

百分比单位 (%)：相对于父元素

与 vh 和 vw 不同，百分比单位(%) 表示相对于父元素大小的值。这意味着无论视口大小如何，100% 高度始终代表元素父元素高度的 100%。

关键区别因素：视口依赖性

vh/vw 和 % 之间的关键区别在于它们对视口的依赖性。 vh 和 vw 单位设计为随视口动态缩放，确保元素尺寸随着用户调整浏览器窗口大小或导航到不同设备而相应调整。

例如，将元素的高度设置为 100vh 将保证无论特定的屏幕分辨率或设备如何，它都会填充视口的整个高度。另一方面，100% 高度只会填充父元素的高度，如果父元素的高度小于视口，则可能会在元素下方留下空白空间。

实际示例

考虑提供的 HTML 和 CSS 代码片段：

<div class="parent">
    <div class="child">100% height (parent is 200px)</div>
</div>
<div class="viewport-height">100vh height</div>

body, html { height: 100%; }
.parent { height: 200px; }
.child { height: 100%; }
.viewport-height { height: 100vh; }

在此在这种情况下，将子级的高度设置为 100% 将使其填充父级 div 的整个高度 (200px)，并在下面留下空白空间。但是，将 viewport-height div 的高度设置为 100vh 将使其填充视口的整个高度，无论父级的大小或屏幕分辨率如何。

结论

虽然 vh/vw 和 % 单位表面上看起来很相似，但它们对视口的潜在依赖使它们与众不同。 vh 和 vw 单位对于创建无缝适应不同屏幕尺寸的响应式布局特别有用，确保跨设备的一致用户体验。

以上是CSS 单位 `vh`/`vw` 和 `%` 之间的主要区别是什么？的详细内容。更多信息请关注PHP中文网其他相关文章！