CSS中如何使用视窗单位

最新推荐文章于 2023-12-02 21:48:14 发布

MakeGreatEffort

最新推荐文章于 2023-12-02 21:48:14 发布

阅读量621

点赞数

分类专栏： css3

css3 专栏收录该内容

7 篇文章

订阅专栏

视窗单位（vw、vh、vmin、vmax）在网页设计中提供了强大的响应式功能，使得元素尺寸能够根据浏览器窗口大小自动调整。本文介绍了如何使用这些单位实现全屏高度、子元素宽度自适应、响应式字体大小、垂直居中和等宽列布局，简化CSS样式表的同时增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

视窗(Viewport)单位已经有了好几年了，但我们并没有看到它被经常使用。它们现在正在被所有的主流浏览器所支持并提供独特的功能使它在特定情况下非常有用，特别是那些涉及响应式的设计。

介绍视窗(Viewport)单位

视窗(Viewport)是你的浏览器实际显示内容的区域——换句话说是你的不包括工具栏和按钮的网页浏览器。这些单位是vw,vh,vmin和vmax。它们都代表了浏览器（视窗(Viewport)）尺寸的比例和窗口大小调整产生的规模改变。

比方说我们有一个1000px（宽）和800px（高）的视窗(Viewport)

vw——代表视窗(Viewport)的宽度为1%，在我们的例子里50vw = 500px。
vh——窗口高度的百分比 50vh = 400px。
vmin——vmin的值是当前vw和vh中较小的值。在我们的例子里因为是横向模式，所以50vim = 400px。
vmax——大尺寸的百分比。50vmax = 500px。

你可以在任何一个可以使用像素值的地方使用它们，比如width,height,margin,font-size等等。它们将通过窗口大小的调整或旋转设备的浏览器来重新计算这些值。

占用页面的整个高度

每一个前端开发人员都致力于这件事。你的第一直觉是这样做：

#elem{
    height: 100%;
}

然而，除非我们为html和body添加100%的高度，但只是这样还是不行的，因为这样的代码并不优雅而且很有可能会破坏你的设计的其余部分。使用vh就变得相当容易了，只需要为高度设置100vh，那它将永远都是你窗口的高度。

#elem{
    height: 100vh;
}

这似乎是一个完美的全屏图像的英雄，而且看起来非常时尚。

子元素大小根据浏览器改变而不是父元素

在某些情况下，你想要的是子元素的大小相对于窗口改变而不是父元素。同样的，按照前面的例子，这样是不行的：

#parent{
    width: 400px;
}
#child{
    /* This is equal to 100% of the parent width, not the whole page. */
    width: 100%;
}

如果我们用vw来设置子元素，那么它会简单的溢出并采取网页的全宽：

#parent{
    width: 400px;
}
#child{
    /* This is equal to 100% of page, regardless of the parent size. */
    width: 100vw;
}

响应字体大小

视窗(Viewport)单位也可以在文本中使用呢！在这个例子中我们使用vw设置字体大小来创建一行很棒的CSS响应式文字。拜拜Fittext！

响应垂直居中

通过设置元素的width,height和margin的视窗(Viewport)单位，你可以不使用任何其它技巧来设置居中。

这里有一个高度为60vh 上下外边距为20vh的矩形，它们加起来是100vh(60+2*20)，使它即便调整窗口大小也可以始终居中。

#rectangle{
    width: 60vw;
    height: 60vh;
    margin: 20vh auto;
}

等宽列

你可以使用视窗(Viewport)单位来设置响应式网格。它们的行为类似于百分比但总是相对于视窗(Viewport)的大小。所以你可以将它们放在一个比窗口宽的父元素里，但它仍然有网格来保持其应有的宽度。这样来创建全屏滑块可谓得心应手。

这项技术需要元素用float:left来对齐彼此相邻的元素：

.column-2{
    float: left;
    width: 50vw;
}
.column-4{
    float: left;
    width: 25vw;
}
.column-8{
    float: left;
    width: 12.5vw;
}

总结

视窗(Viewport)单位有它的用途而且值得尝试。它们易于理解，而且在某些情况下对于代替CSS更加难的解决方案或不可能实现的技术有非常大的帮助。

本文根据@Danny Markov的《Simplify Your Stylesheets With The Magical CSS Viewport Units》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://tutorialzine.com/2015/05/simplify-your-stylesheets-with-the-magical-css-viewport-units/。

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/css/simplify-your-stylesheets-with-the-magical-css-viewport-units.html © w3cplus.com