CSS 视口单位：vh、vw、vmin 和 vmax

在本文中，我们将详细介绍与浏览器视口相关的四个方便的长度单位：vh、vw和。这些是真正的“响应式长度单位”，因为每次浏览器调整大小时它们的值都会发生变化，并且它们引入了非常有用的选项来调整 CSS 中元素的大小。vminvmax Play Next Unmute Current Time 0:08 / Duration 2:00 Fullscreen Backward Skip 10s Play Video Forward Skip 10s 浏览器的视口是浏览器中显示网站内容的区域。测量该区域的能力非常有用，因为它使曾经困难的任务变得容易 - 例如将元素的高度设置为浏览器窗口的高度。 目录 单位及其含义 我们先来看看这些单位的含义。 vh代表视口高度。该单位基于视口的高度。的值1vh等于视口高度的 1%。的值100vh等于视口高度的 100%。 1vw代表视口宽度。该单位基于视口的宽度。的值1vw等于视口宽度的 1%。



vmin代表视口最小值。该单位基于视口的较小尺寸。如果视口高度  电话号码列表 小于宽度，则 的值1vmin将等于视口高度的 1%。同样，如果视口宽度小于高度，则 的值1vmin将等于视口宽度的 1%。 vmax代表视口最大。该单位基于视口的较大尺寸。如果视口高度大于宽度，则 的值1vmax将等于视口高度的 1%。同样，如果视口宽度大于高度，则 的值1vmax将等于视口宽度的 1%。 Learn to Code with JavaScript 一些示例值 让我们看看这些单位在不同情况下的价值是多少： 如果视口1200px又宽又1000px高，则 的值10vw将是120px， 的值10vh将是100px。由于视口的宽度大于其高度，10vmax因此的值为 ，的120px值为。10vmin100px 如果现在旋转设备以使视口变得1000px又宽又1200px高，则 的值10vh将为120px， 的值10vw将为100px。有趣的是， 的值10vmax仍然是120px，因为它现在将根据视口的高度确定。同样， 的值10vmin仍然是100px。 如果调整浏览器窗口的大小，使视口变宽变1000px高800px，则 的值10vh将变为80px， 的值10vw将变为100px。同样， 的值10vmax将变为100px， 的值10vmin将变为80px。 此时，视口单位听起来可能类似于百分比。然而，它们非常不同。



在百分比的情况下，子元素的宽度或高度是相对于其父元素确定的。这是一个例子： 正如您所看到的，第一个子元素的宽度设置为等于其父元素宽度的 80%。但是，第二个子元素的宽度为80vw，这使其比其父元素更宽。 vh、vw、vmin 和 vmax 的应用 由于这些单位基于视口尺寸，因此在需要相对于视口设置元素的宽度、高度或大小的情况下使用它们非常方便。 全屏背景图像或带有视口单位的部分 在完全覆盖屏幕的元素上设置背景图像是很常见的。同样，您可能想要设计一个网站，其中有关产品或服务的每个单独部分都必须覆盖整个屏幕。在这种情况下，您可以将各个元素的宽度设置为等于 100%，并将其高度设置为等于100vh。 位来设置font-size标题，它们将完美适合屏幕。每当视口宽度发生变化时，浏览器也会自动适当缩放标题文本。您唯一需要做的就是根据font-size视口单位计算出正确的初始值。 这种设置font-size方式的一个主要问题是文本的大小会根据视口的不同而有很大差异。