如何理解CSS中的视口单元

层叠样式表(Cascading Style Sheets, CSS)视口被定义为指设备显示的窗口屏幕上的可见区域。CSS最初引入视口单元已经有好几年了。视口单元允许您根据用户屏幕的总宽度或高度(视口)的比例来调整项目和字体的大小。当浏览器调整大小时，视口单位值会发生变化，这意味着它们实际上是“响应长度单位”。

视口单元的类型

在CSS中有四个基于视口的单元，它们是视口单元的值:

• 视口高度(vh):这个单位取决于视口的高度。值“1vh”对应视口高度的1%。

例:“1vh”的值将是10像素(px)，如果视口宽为1200px，高为1000px，“10vh”的值将是100px。

• 视窗宽度(vw):视口的宽度用于计算这个单位。值“1vw”对应视口宽度的1%。

例:如果视口宽为1200px，高为1000px，则“1vw”的值为12px，“10vw”的值为120px。

• 最小视口尺寸(vmin):这个单元是基于视口的缩小尺寸。如果视口高度小于宽度，“1vmin”等于视口高度的1%。同样地，如果视口宽度小于高度，“1vmin”的值将是视口宽度的1%。

例:如果视口是1200px宽，1000px高。“1vmin”的值将是10px，“10vmin”的值将是100px，因为viewport的高度小于它的宽度。

• 最大视口尺寸(vmax)这个单元是基于视口的大尺寸。如果视口高度大于宽度，“1vmax”等于视口高度的百分之一。同样地，如果视口宽度大于高度，“1vmax”将等于视口宽度的1%。

例:如果视口是1200px宽，1000px高。“1vmax”的值将是12px，“10vmax”的值将是120px，因为viewport的宽度大于它的高度。

让我们看看这些单元在不同场景下的表现:

• 如果视口宽为1200px，高为1000px， " 10vw "的值为120px， " 10vh "的值为100px。“10vmax”的值将是120px，“10vmin”的值将是100px，因为viewport的宽度大于它的高度。
• 如果设备现在被旋转，使视口宽为1000像素，高为1200像素，“10vh”的值为120像素，“10vw”的值为100像素。10vmax的值将保持120px，尽管它现在由视口的高度决定。类似地，“10vmin’s”的值将保持在100px。
• 如果您调整浏览器窗口的大小，使视口宽为1000像素，高为800像素，“10vh:”的值将变为80像素，“10vw”的值将变为100像素。“10vmax”的值将变成100px，“10vmin”的值将变成80px。

视口单位vs.百分比

视口单位表示视口大小的比例，这意味着给大小百分比值乍一看是相同的。视口单位总是视口整体大小的百分比，但应用于元素的百分比值是元素父元素的百分比，而不一定是整个视口。

此时视口单位可能显示为百分比。然而，它们有很大的不同。在百分比的情况下，子元素的宽度或高度取决于它的父元素。如下面的代码示例所示:

在上面的例子中，percent-box和viewport-box的宽度设置为60%。如输出图像所示，两个部分所占面积相同。“percent-inner- box 's”宽度设置为其父部分宽度的90%。与“百分比框”相比，“百分比内框”占据了90%的空间。“viewport-inner- box的”宽度设置为“90vw”。如下图所示，“viewport-inner-box”占据了视口大小的90%，这比它的父部分要大。

输出：

何时使用视口单元

当项的宽度、高度或大小必须相对于视口指定时，这些单位特别有用，因为它们依赖于视口尺寸。

全屏模式部分或背景图像

在完全覆盖屏幕的项目上设置背景图像是很流行的。类似地，你可能想要创建一个网站，其中每个产品或服务部分占据整个屏幕。在这种情况下，您可以使相应元素的宽度为100%，元素的高度为“100vh”。你可以在下面的背景图像示例中看到这一点:

上面的代码用于将背景图像显示为全屏图像。为此，我们必须将“full-section”的宽度设置为100%，高度设置为“100vh”。此外，我们必须将图像路径传递给“全屏图像”。我们可以使用这个来使背景图像填充整个屏幕，如下图所示。

下面是一个全屏部分的例子:

上面的代码用于显示全屏部分。为此，我们必须将“full-section”的宽度设置为100%，高度设置为“100vh”。如下图所示，我们必须将背景颜色设置为“全屏部分”。

输出：

如何使用视口单元使元素居中

当你想把一个元素放在用户屏幕的正中央时，视口单元可能非常有用。如果您知道元素的高度，您所要做的就是将边缘属性的顶部和底部值设置为[(100 - height)/2]vh。

但是，我们现在可以使用Flexbox或CSS Grid将组件垂直和水平居中。如下面的例子所示:

在上面的例子中，我们使用一个视口单元来居中元素。我们需要知道元素的高度。在上面的例子中，我们将“居中”部分的高度设置为“70vh”。现在我们使用公式[(100 - height)/2]vh来得到“30vh”[(100 - 70)/2 = 30vh]作为我们的输出。上距和下距必须分别设置为“居中”和“30vh”。如下图所示，这让我们可以毫不费力地将元素居中。

带有视口单元的标题

视口的大小直接影响视口单元的值。如果您使用视口单位选择标题的字体大小，它们将精确地适合屏幕。当视口宽度改变时，浏览器将自动缩放标题文本以适应。你现在要做的就是在视口单元中找到合适的字体大小起始值。

它工作，在大的视口，我们的标题将更大，而在小的视口，它将更小。一个问题是，在非常大的视口中，标题可能会变得太大，而在非常小的视口中，它可能会变得太小。因此，我们可能需要利用断点来设置静态字体大小

你可以在下面的例子中看到代码:

视口大于或小于给定大小的值。

或者，我们可以通过使用“vmax”单位来解决部分问题，以确保我们的标题不会太小。我们的标题将是视口宽度和高度之间最大字体大小的4%:

h1 {

字体大小:5 vmax;

text-align:中心;

｝

你可以在下面的例子中看到代码:

输出：

使用视口单元时需要记住的重要事项

如果你决定在项目中使用视口单元，有几件事需要记住。

使用视口单元设置元素宽度时要谨慎。如果根元素的overflow属性设置为auto，浏览器将假定滚动条不存在。因此，元素会比你想象的要宽一些。考虑以下带有四个div元素的标记:

div {

高度:50 vh;

宽度:50大众;

浮:左;

｝

每个div通常应该占据可用屏幕的四分之一。另一方面，每个div的宽度是在假设没有滚动条的情况下计算的。因此，div组件比它们并排显示所需的宽度要宽一些。

这个问题可以通过将div的宽度从“50vw”改为50%来解决。结论是，在定义块组件的宽度时，应该使用百分比，这样滚动条就不会影响宽度计算。

浏览器支持

每个主流浏览器似乎都支持这些单元。然而，当使用视口单元时，仍然有一些缺陷和困难需要注意。例如，在Firefox中，“100vh”对任何显示属性设置为table的元素都没有影响。Chrome不支持边框宽度、列间距、变换值和框阴影的视口单位。

最终的形式

你可以在下面的gif图片中看到我是如何增加或减少屏幕尺寸的。无论屏幕大小如何，布局都保持不变。它在所有屏幕尺寸上都保持稳定。因此，您可以通过使用视口单元来解决较高分辨率的问题。对于更高的分辨率，CSS的视口单元可以无缝地工作。

近年来，我最喜欢的浏览器增强之一就是视口单元。Viewport单元是理想的，如果你想要很多的通用性，当涉及到自定义网站的功能，以各种设备。在我看来，视口单元非常适合广泛的设备。如果你已经读到这里，我希望你已经是视口单元的粉丝。如果你有任何问题，请立即联系我们的商务专家．