CSS：视窗高度（vh）和视窗宽度（vw）单位得到广泛支持吗

在本文中，我们将介绍CSS中的视窗高度（vh）和视窗宽度（vw）单位，并探讨它们在不同浏览器和设备上的支持情况。

阅读更多：CSS 教程

视窗高度（vh）和视窗宽度（vw）单位简介

视窗高度（vh）和视窗宽度（vw）是相对于浏览器视窗大小的CSS单位。视窗高度（vh）表示视窗的百分比高度，1vh等于视窗高度的1%。视窗宽度（vw）表示视窗的百分比宽度，1vw等于视窗宽度的1%。

使用vh和vw单位可以方便地根据视窗大小自动调整元素的尺寸。例如，如果要将一个div元素的高度设置为视窗高度的50%，可以使用50vh作为CSS属性值。如果要将一个图片的宽度设置为视窗宽度的30%，可以使用30vw作为CSS属性值。这样就可以实现响应式设计，使得网页在不同设备上都能够自适应地显示。

浏览器支持情况

视窗高度（vh）和视窗宽度（vw）单位从CSS3开始引入，目前已经得到了主流浏览器的广泛支持。以下是一些常见浏览器对这两个单位的支持情况：

Chrome：Chrome最新版本对vh和vw单位有很好的支持。
Firefox：Firefox最新版本也对vh和vw单位有很好的支持。
Safari：Safari最新版本对vh和vw单位有很好的支持。
Edge：Edge最新版本对vh和vw单位有很好的支持。
Internet Explorer：截至本文撰写时，Internet Explorer不支持vh和vw单位。

需要注意的是，尽管大多数主流浏览器都支持vh和vw单位，但在某些旧版本或移动设备上可能存在兼容性问题。因此，在使用这两个单位时，还是建议进行兼容性测试，并提供备用方案以确保网页在各种设备上的正常显示。

示例说明

下面我们来通过几个示例说明如何使用视窗高度（vh）和视窗宽度（vw）单位：

示例1: 设置页面最小高度为视窗高度的100%

body {
  min-height: 100vh;
}

上述CSS代码将页面的最小高度设置为视窗高度的100%。这样可确保页面在任何情况下都至少与视窗高度一样高，防止出现滚动条。

示例2: 创建一个占据屏幕宽度50%，高度占据屏幕高度20%的div容器

.container {
  width: 50vw;
  height: 20vh;
}

上述CSS代码将一个div容器的宽度设置为视窗宽度的50%，高度设置为视窗高度的20%。这样可实现一个自适应大小的容器，在不同设备上都有良好的显示效果。

示例3: 设置图片宽度为视窗宽度的80%

img {
  width: 80vw;
}

上述CSS代码将一张图片的宽度设置为视窗宽度的80%。这样可保证图片的宽度在不同设备上自适应，并且随着视窗大小的变化而调整。

通过以上示例，我们可以看到使用视窗高度（vh）和视窗宽度（vw）单位可以轻松实现响应式设计效果，使得网页在各种设备上都能得到良好的显示效果。

总结

本文介绍了CSS中的视窗高度（vh）和视窗宽度（vw）单位，并探讨了它们在不同浏览器和设备上的支持情况。vh和vw单位是相对于浏览器视窗大小的单位，可以方便地实现响应式设计。尽管主流浏览器对这两个单位都有良好的支持，但在某些旧版本或移动设备上可能存在兼容性问题。因此，建议在使用这两个单位时进行兼容性测试，并提供备用方案以确保网页在各种设备上的正常显示。通过合理运用vh和vw单位，可以使网页更加灵活和适应性强，提升用户的浏览体验。