CSS vh 和 vw - 绿叶网

在 CSS 中，vw 和 vh 是一种相对单位，它们分别代表视口宽度和视口高度的百分之一。通过使用 vw 和 vh 单位，我们可以轻松地创建响应式布局，使得元素的大小能够根据视口的大小自动进行调整。

CSS vw 和 vh 是什么？

vw 指的是 “视口宽度” 的 1/100。比如视口的宽度为 1000 像素，则 1vw 等于 10 像素。

vh 指的是 “视口高度” 的 1/100。比如视口的高度为 800 像素，则 1vh 等于 8 像素。

所谓的 “视口” 指的是 “浏览器窗口”。当我们改变浏览器窗口的宽度和高度时，此时就相当于改变视口的宽度和高度，然后 1vw 和 1vh 的高度是已经改变的了。

对于 vw 和 vh 单位来说，它们具有以下特点。

相对性：vw 和 vh 单位是相对单位，它们的值会根据视口的大小动态计算。也就是说，当用户改变浏览器窗口大小时，使用 vw 和 vh 单位的元素大小也会相应地改变。
响应式布局：使用 vw 和 vh 单位可以实现响应式布局，因为元素的大小会根据视口大小自动缩放。这使得网页在不同设备和屏幕尺寸上都能保持良好的显示效果。

CSS vw 和 vh 的使用

vw 和 vh 单位可以用于设置元素的宽度、高度、边距、字体大小等属性，我们来看一个简单的例子。

示例：使用 vw 和 vh 单位设置元素的宽高

运行代码

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 50vw;      /* 宽度为视口宽度的一半 */
            height: 50vh;     /* 高度为视口高度的一半 */
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
    <div>绿叶网</div>
</body>
</html>

页面效果如下图所示。

使用 vw 和 vh 单位设置元素的宽高

分析：

在这个例子中，div 元素的宽度被设置为视口宽度的一半，而高度被设置为视口高度的一半。小伙伴们可以自行测试一下，当改变浏览器窗口大小时，div 元素的宽高也会随着改变。

提示: 绿叶网的 “HTML 在线编辑器” 就用到了 vw 和 vh 作为单位。

CSS vw 和 vh 的优缺点

对于 vw 和 vh 单位来说，它们具有以下优点。

简化响应式设计：vw 和 vh 单位可以使得元素随着窗口大小自动缩放，不用写一堆媒体查询，也不用自己计算像素比例放。
提高灵活性：不管用户是用手机、平板还是超宽显示器，元素都能根据视口大小自动调整，非常适合做全屏背景、文字自适应等效果。

不过需要注意的是，vw 和 vh 单位也存在以下的缺点。

兼容性问题：虽然现代浏览器对 vw 和 vh 单位的支持度已经很高，但在一些旧版本的浏览器中可能存在兼容性问题。
可能引起布局问题：在某些情况下，过度依赖 vw 和 vh 单位可能会导致布局问题。例如，当视口高度过小或过宽时，使用 vh 或 vw 单位可能会导致元素变形或重叠。

提示: 在使用 vw 和 vh 单位时，可以搭配 min()、max()、clamp() 等函数来限制最大尺寸或最小尺寸，这样更稳。