CSS Viewport单元已经存在了几年,随着时间的流逝,我看到开发人员越来越多地使用它们。它们的好处在于为我们提供了一种不需要使用JavaScript就能以动态的方式调整大小的方法。而且,如果它们失败了,很容易提供一个备用方案。
在本文中,我们将学习CSS视口单元及其使用方法,以及一些常见问题的用例和解决方案。让我们开始吧!
介绍
视口单位为:vw,vh,vmin 和 vmax。
视口宽度 vw 单位表示根元素宽度的百分比。一个 vw 等于视口宽度的1%。
![0edfc95b9d940a801f23912b995ce84c.png](https://img-blog.csdnimg.cn/img_convert/0edfc95b9d940a801f23912b995ce84c.png)
我们有一个具有以下CSS的元素:
.element { width: 50vw;}
当视口的宽度为 500px 时,将如下计算 50vw:
width = 500*50% = 250px
Viewport Height
vh 单位表示根元素高度的百分比。 1 vh 等于视口高度的1%。
![712d038c25caae15515370da33d1bde9.png](https://img-blog.csdnimg.cn/img_convert/712d038c25caae15515370da33d1bde9.png)
我们有一个具有以下CSS的元素:
.element { height: 50vh;}
当视口的高度为 290px 时,将按以下方式计算 70vh:
height = 290*70% = 202px
就是这样。让我们移动到另一种视口单位!
Vmin 单位
vmin 表示视口的宽度和高度的最小值。如果视口宽度大于其高度,则将根据高度计算该值。
让我们来看下面的例子。
我们有一个处于横向模式的手机,一个元素具有 vmin 单位。在这种情况下,该值将根据视口高度来计算,因为它小于宽度。
![e6335fe2112bc9a7de9905559c76c42e.png](https://img-blog.csdnimg.cn/img_convert/e6335fe2112bc9a7de9905559c76c42e.png)
.element { padding-top: 10vmin; padding-bottom: 10vmin;}
这是 vmin 的计算方式:
![ba5d49f3ef20028d187103ec7c476cf6.png](https://img-blog.csdnimg.cn/img_convert/ba5d49f3ef20028d187103ec7c476cf6.png)
您可能会猜到,结果将如下计算:
padding-top = (10% of height) = 10% * 164 = 32px padding-bottom = (10% of height) = 10% * 164 = 32px
Vmax 单位
与vmin相反,该值是根据最大宽度和高度计算的。
![1c95f14d33373dd8932d139a6f85c6ad.png](https://img-blog.csdnimg.cn/img_convert/1c95f14d33373dd8932d139a6f85c6ad.png)
让我们来看下面的例子。
.element { padding-top: 10vmax; padding-bottom: 10vmax;}
![0543f577cb2ab44b587f566de541321b.png](https://img-blog.csdnimg.cn/img_convert/0543f577cb2ab44b587f566de541321b.png)
结果将计算如下:
padding-top = (10% of width) = 10% * 350 = 35px padding-bottom = (10% of width) = 10% * 350 = px
视口单位与百分比有何不同?
视口单位基于页面的根元素,而百分比则基于它们所在的容器。由于这个原因,它们彼此不同,每个都有自己的用例。
视口单位的用例
在以下各节中,我将探讨视口单元的一些用例以及如何在项目中实现它们。
字体大小
![a3e950e9e7c7330500d19f3054e87990.png](https://img-blog.csdnimg.cn/img_convert/a3e950e9e7c7330500d19f3054e87990.png)
CSS视口单位非常适合响应式排版。例如,我们可以将以下内容用作文章标题:
.title { font-size: 5vw;}
标题的 font-size 将根据视口宽度增加或缩小。就像提供的字体大小是视口宽度的5%一样。
然而,在没有适当测试的情况下使用它可能很有诱惑力。让我们看看下面的视频:
![a746d8aaf7d5edb5f869595b54a3317b.gif](https://img-blog.csdnimg.cn/img_convert/a746d8aaf7d5edb5f869595b54a3317b.gif)
请注意,字体大小在移动大小中变得很小,这对可访问性和用户体验不利。据我所知,移动设备上的最小字体大小不应该超过 14px。在GIF中,字体大小低于 10px。
要解决该问题,我们需要为标题提供最小字体大小,使其不能低于该大小。 CSS calc() 可以解救!
.title { font-size: calc(14px + 2vw);}
calc() CSS函数将具有一个基本的 14px 值,并将添加 2vw 的值。有了这些,字体大小值就不会变得太小。
要考虑的另一重要事项是字体大小在大屏幕(例如27英寸iMac)上的行为。会发生什么?好吧,你猜对了。字体大小达到 95px 左右,这是一个巨大的价值。为了避免这种情况,我们应该在某些断点处使用媒体查询并更改 font-size 大小。
@media (min-width: 1800px) { .title { font-size: 40px; }}
通过重置 font-size大小,我们可以确保大小不会太大。您可能还需要添加多个媒体查询,但这取决于您,并且取决于项目的上下文。
全屏部分
有时,我们需要一个剖面以占据视口高度的100%。这称为全屏部分。为此,我们可以使用视口高度单位。
![53b92f11950807d381867c504c19b46d.png](https://img-blog.csdnimg.cn/img_convert/53b92f11950807d381867c504c19b46d.png)
.section { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;}
通过添加 height: 100vh,我们可以确保剖面高度将占据视口的100%。另外,我添加了一些flexbox来处理内容的水平和垂直居中位置。
粘性页脚
在大屏幕上,您可能会注意到网站内容很短,并且页脚没有停留在底部。这是正常现象,并不认为这是一种不良做法。但是,还有改进的空间。考虑一下代表这个问题的下图:
![e88cc0e67b5c837bef26b812932ede2a.png](https://img-blog.csdnimg.cn/img_convert/e88cc0e67b5c837bef26b812932ede2a.png)
为了解决这个问题,我们需要使主要内容的高度等于viewport height - (header + footer)。动态地进行操作很棘手,但是使用CSS视口单元,这非常容易。
1.第一个解决方案:计算和视口单位
如果页眉和页脚的高度固定,则可以将CSS calc() 函数与视口单位结合使用。方法如下:
header,footer { height: 70px;}main { height: calc(100vh - 70px - 70px);}
不能保证此解决方案始终有效,尤其是对于页脚而言。在我的职业生涯中,我没有使用固定高度的页脚,因为在例如不同的屏幕尺寸下,此页脚是不可行的。
2.第二种解决方案:Flexbox和视口单元(推荐)
通过将 100vh 添加为body元素的高度,然后可以使用flexbox来使main元素占用剩余空间。
body { min-height: 100vh; display: flex flex-direction: column;{main { /* 这将使主元素动态地占用剩余的空间 */ flex-grow: 1;}
这样一来,此问题已得到解决,无论内容长短,我们的页脚都会粘滞。
![dd0f793d243a0dbefb76bbc27e8b3c56.png](https://img-blog.csdnimg.cn/img_convert/dd0f793d243a0dbefb76bbc27e8b3c56.png)
Responsive 元素
假设我们有一个作品集来展示我们的响应式设计工作,并且我们有三种设备(移动设备、平板电脑和笔记本电脑)。每个设备包含一个图像。目标是使这个100%响应CSS。
![e7519bf8d62fb28e16bc8f5c129fa77a.png](https://img-blog.csdnimg.cn/img_convert/e7519bf8d62fb28e16bc8f5c129fa77a.png)
通过使用CSS网格和视口单位,我们可以使其完全响应和动态。
请注意,在 grid-* 属性中使用了视口单位。它们也用于 border,border-radius和其他属性。所有这些将导致流畅的设计。
.wrapper { display: grid; grid-template-columns: repeat(20, 5vw); grid-auto-rows: 6vw;}.mobile { position: relative; z-index: 1; grid-column: 2 / span 3; grid-row: 3 / span 5;} .tablet { position: relative; z-index: 1; grid-column: 13 / span 7; grid-row: 4 / span 4; border-bottom: 1vw solid #a9B9dd; border-right: solid 3vw #a9B9dd;} .laptop { position: relative; grid-column: 3/span 13; grid-row: 2 / span 8;}/* 视口单元用于底部、左侧、右侧、高度和边框半径。这不是很酷吗?*/.laptop:after { content:""; position:absolute; bottom: -3vw; left: -5.5vw; right: -5.5vw; height: 3vw; background-color: #a9B9dd; border-radius: 0 0 1vw 1vw;}
![e99e940886008d1c701bc9f628e390fa.gif](https://img-blog.csdnimg.cn/img_convert/e99e940886008d1c701bc9f628e390fa.gif)
从容器中挣脱出来
我注意到一个最适合编辑布局的用例。一个子元素,即使父元素的宽度受到限制,它也会占据视口100%的宽度。考虑下图:
![08566587bec4d722cf7a67247d1eaeb3.png](https://img-blog.csdnimg.cn/img_convert/08566587bec4d722cf7a67247d1eaeb3.png)
为了达到类似的效果,我们可以使用视口单位和一些定位属性。这是CSS:
.break-out { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;}
让我们对其进行分解,以便我们逐步了解所有这些工作原理。
1.添加width: 100vw
最重要的步骤,将使图像的宽度等于视口的100%。
![0703629a8982d43c97ec8567c18b7b9d.png](https://img-blog.csdnimg.cn/img_convert/0703629a8982d43c97ec8567c18b7b9d.png)
2.添加margin-left: -50vw
为了使图像居中,我们将需要为其提供负的页边距,且其宽度为视口宽度的一半。
![5fd60e02307fa42c971fa85cfee85bec.png](https://img-blog.csdnimg.cn/img_convert/5fd60e02307fa42c971fa85cfee85bec.png)
3.增加left: 50%
最后,我们需要将图像向右推,其值为父宽度的50%。
![aacfb95f51c254f0bb85c63e61ff006a.png](https://img-blog.csdnimg.cn/img_convert/aacfb95f51c254f0bb85c63e61ff006a.png)
垂直和水平间距
我想到的另一个有趣的用例是使用viewport单位来表示元素之间的间距。可以与 margin,top,bottom 和grid-gap 等值一起使用。使用时,间距将基于视口宽度或高度,这可能有助于使布局更动态。
模态
对于模态,我们需要将它们从视口顶部推入。通常,我使用top属性进行此操作,并使用百分比或像素值。但是,对于视口单位,我们可以添加一个可以根据视口高度改变的间距。
但是,对于视口单位,我们可以添加一个可以根据视口高度改变的间距。
![d3290fb3997a51ac5217f81353d41ab7.png](https://img-blog.csdnimg.cn/img_convert/d3290fb3997a51ac5217f81353d41ab7.png)
.modal-body { top: 20vh;}
请参阅下面的视频以获取最终结果。
![e65e956615dc32bd3b040e2cb229a193.gif](https://img-blog.csdnimg.cn/img_convert/e65e956615dc32bd3b040e2cb229a193.gif)
Page Header
页面标题是充当页面介绍的部分。它通常具有标题和描述,并且其中上下边缘的高度固定或填充,我们对填充感兴趣。
例如,这是CSS的外观:
.page-header { padding-top: 1rem; padding-bottom: 1rem;}@media (min-width: 800px) { .page-header { padding-top: 4rem; padding-bottom: 4rem; }}
移动设备上的垂直填充很小,而较大的视口上的垂直填充更大。使用视口单位怎么办?让我们来探索一下。
.page-header { padding-top: 10vh; padding-bottom: 10vh;}.page-header h2 { margin-bottom: 1.5vh;}
我将 vh 单位用于页面标题的填充,以及标题下方的边距。注意间距如何变化!
![8ae0a2c8631e0504c7e26b4b647b2a4b.gif](https://img-blog.csdnimg.cn/img_convert/8ae0a2c8631e0504c7e26b4b647b2a4b.gif)
Grid Of Items
动态间距的另一个用例是项目网格。它可以用于任何内容,例如文章网格,服务部分等。对于我们的情况,我们将看看如何将其用于文章网格。
![6eaa611e8d5166395363a6c2a75ac4b3.png](https://img-blog.csdnimg.cn/img_convert/6eaa611e8d5166395363a6c2a75ac4b3.png)
通过在网格 grid-gap (间隙)内使用视口单位,我们可以获得所需的结果。注意,我也使用了CSS calc() 函数。使用 calc() 的目标是要有一个基本的垂直和水平间隙。
.wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: calc(14px + 1vh) calc(14px + 0.5vw);}
Vmin 和 Vmax 示例
在研究这两个值的用例时,除了CSS-Tricks,我什么都没有找到。用例是关于页面标题元素的顶部和底部填充。当视口很小(移动)时,填充通常会减少。通过使用 vmin,我们可以根据视口较小的尺寸(宽度或高度)来设置顶部和底部的填充。
.page-header { padding: 10vmin 1rem;}
![68172ba302a64703165b2036806805ff.gif](https://img-blog.csdnimg.cn/img_convert/68172ba302a64703165b2036806805ff.gif)
垂直媒体查询和视口单位
横向模式下的全屏
通过使用垂直媒体查询,我们可以检查用户的手机或平板电脑是否处于横向模式。如果是这样,那么使用 height:100vh 截取视口的整个高度将毫无意义。
![472c69ee0be90b7ff759f10fd611e4f4.png](https://img-blog.csdnimg.cn/img_convert/472c69ee0be90b7ff759f10fd611e4f4.png)
要解决该问题,我们可以执行以下操作:
@media (min-height: 400px) { .section { height: 100vh; }}
或者我们可以使用定向媒体查询:
@media (orientation: landscape) { .section { height: 100vh; }}
长宽比
我们可以使用 vw 单位创建响应元素,以保持其宽高比,而不管视口大小如何。让我们来探索一下。
我们将需要确定所需的宽高比。对于此示例,我将使用 9/16。
section { /* 9/16 * 100 */ height: 56.25vw;}
![febdf41392e93aa77f6ad1734587ebf6.gif](https://img-blog.csdnimg.cn/img_convert/febdf41392e93aa77f6ad1734587ebf6.gif)
将视口单位用于图形元素。我不确定我的命名是否正确,但希望您能从以下直观示例中得到我的理解。
流行的顶部边框
你知道现在大多数网站使用的顶部边框吗?大多数情况下,它的颜色与品牌颜色相同,这将赋予它一些个性。
![41275a39121b6f2752cbe4733b285063.png](https://img-blog.csdnimg.cn/img_convert/41275a39121b6f2752cbe4733b285063.png)
我们支持边框的初始值为 3px。如何将固定值转换为viewport ?下面是如何计算它的等效的 vw。
vw = (Pixel Value / Viewport width) * 100
视口宽度用于估计像素值与所需 vw 单位之间的比率。
对于我们的示例,以下是顶部边框的添加方式:
.header { border-top: 4px solid #8f7ebc; }
在我的情况下,视口宽度为1440(这不是固定数字,请用您自己的数字替换)
vw = (4 / 1440) * 100 = 0.277
.header { border-top: 0.277vw solid #8f7ebc; }
更好的是,我们可以使用一个基本像素值,而视口单元可以是一个附加的。
.header { border-top: calc(2px + 0.138vw) solid $color-main;}
节编号
对于带有计数器或图标的部分项目,我们可以利用视口单位的使用。参见下面的模型:
![ba4aadecd7f73c5f758e247356ce1c67.png](https://img-blog.csdnimg.cn/img_convert/ba4aadecd7f73c5f758e247356ce1c67.png)
我们有一个包含数字的圆,并且有文本内容。两者都需要使用视口单元流畅地调整大小。让我们探讨一下!
/**1. 为伸缩、宽度和高度属性使用一个流体值。2. 行高用于将文本垂直居中3. Font size4. 圆与文字之间的间距**/.point:before { flex: 0 0 calc(24px + 4vw); /* [1] */ width: calc(24px + 4vw); /* [1] */ height: calc(24px + 4vw); /* [1] */ line-height: calc(24px + 4vw); /* [2] */ font-size: calc(14px + 1vw); /* [3] */ margin-right: calc(10px + 0.5vw); /* [4] */}
![ff5058508ba93b2c7cdcf8f1b0d9ea04.png](https://img-blog.csdnimg.cn/img_convert/ff5058508ba93b2c7cdcf8f1b0d9ea04.png)
原文:https://ishadeed.com/article/viewport-units/
翻译:做工程师不做码农
本头条号聚焦大前端技术和程序员成长,如果对你有所启发和帮助,可以点个关注、收藏,也可以留言讨论,这是对作者的最大鼓励。
作者简介:Web前端工程师,全栈开发工程师、持续学习者。