在响应式设计中，我们经常会使用各种单位来实现网页的自适应效果。其中，基于视口的单位 vw、vh、vmin、vmax 是最常用的几种单位。本文将对这四种单位进行详细解析和实践，帮助前端工程师更好地掌握响应式设计技术。
什么是视口单位
视口单位指的是相对于浏览器视口大小的尺寸单位。在编写响应式设计页面时，我们经常会使用这些单位来定义元素的尺寸和位置，从而实现页面的自适应效果。
vw 和 vh
vw 和 vh 分别代表视口宽度（viewport width）和视口高度（viewport height），它们的取值范围都是从 0 到 100。
使用 vw 和 vh 可以方便地实现元素尺寸的自适应调整。例如，我们可以使用下列 CSS 代码将一个元素的宽度设置为视口宽度的一半：
.example {
width: 50vw;
}这里的 50vw 表示该元素的宽度应该是视口的宽度一半。
同理，我们可以使用 vh 来设置元素的高度，比如将一个元素的高度设置为视口高度的 30%：
.example {
height: 30vh;
}vmin 和 vmax
与 vw 和 vh 不同，vmin 和 vmax 代表的是视口宽度和高度的最小值和最大值。
具体来说，vmin 表示视口宽度和高度中更小的那个值，而 vmax 则表示更大的那个值。例如，如果视口宽度为 800px，高度为 600px，那么：
- 1vmin 等于 6px（因为 1% 的 600px 小于 1% 的 800px）
- 1vmax 等于 8px（因为 1% 的 800px 大于 1% 的 600px）
使用 vmin 和 vmax 可以更加精确地调整元素的尺寸。例如，我们可以使用下列 CSS 代码将一个元素的尺寸设置为视口宽度和高度中的较小值：
.example {
width: 50vmin;
height: 50vmin;
}这里的 50vmin 表示该元素的宽度和高度都应该是视口宽度和高度中较小的那个值的一半。同理，我们也可以使用 vmax 来实现基于视口的元素尺寸自适应。
实践示例
下面是一个实际的示例，我们使用 vw 和 vh 设置了一个自适应的网格布局。在视口宽度小于 768px 的情况下，自动切换为一列布局。
-- -------------------- ---- -------
---------- -
-------- -----
---------- -----
-
----- -
------ -----
------- -----
------- ----
-
------ ----------- ------ -
---------- -
--------------- -------
-
----- -
------ -----
------- -----
------- --- --
-
-这里的 .container 容器使用了 flexbox 布局，并使用 vw 和 vh 来设置 .card 元素的尺寸和间距。当视口宽度小于 768px 时，自动切换为一列布局，每个 .card 元素占据整个视口宽度的 90%。
总结
基于视口的单位 vw、vh、vmin、vmax 在响应式设计中应用广泛，能够方便地实现基于视口的元素尺寸自适应。希望本文能够对前端工程师在响应式设计中的实践提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64568453968c7c53b099c8f4