本文摘要：CSS Viewport单元已经存在了几年，随着时间的流逝，我看到开发人员越来越多地使用它们。

CSS Viewport单元已经存在了几年，随着时间的流逝，我看到开发人员越来越多地使用它们。它们的利益在于为我们提供了一种不需要使用JavaScript就能以动态的方式调整巨细的方法。

而且，如果它们失败了，很容易提供一个备用方案。在本文中，我们将学习CSS视口单元及其使用方法，以及一些常见问题的用例息争决方案。

让我们开始吧！先容视口单元为：vw，vh，vmin 和 vmax。视口宽度 vw 单元表现根元素宽度的百分比。一个 vw 即是视口宽度的1％。

我们有一个具有以下CSS的元素：.element { width: 50vw;}当视口的宽度为 500px 时，将如下盘算 50vw：width = 500*50% = 250pxViewport Heightvh 单元表现根元素高度的百分比。1 vh 即是视口高度的1％。我们有一个具有以下CSS的元素：.element { height: 50vh;}当视口的高度为 290px 时，将按以下方式盘算 70vh：height = 290*70% = 202px就是这样。

让我们移动到另一种视口单元！Vmin 单元vmin 表现视口的宽度和高度的最小值。如果视口宽度大于其高度，则将凭据高度盘算该值。

让我们来看下面的例子。我们有一个处于横向模式的手机，一个元素具有 vmin 单元。

在这种情况下，该值将凭据视口高度来盘算，因为它小于宽度。.element { padding-top: 10vmin; padding-bottom: 10vmin;}这是 vmin 的盘算方式：您可能会猜到，效果将如下盘算：padding-top = (10% of height) = 10% * 164 = 32px padding-bottom = (10% of height) = 10% * 164 = 32pxVmax 单元与vmin相反，该值是凭据最大宽度和高度盘算的。

让我们来看下面的例子。.element { padding-top: 10vmax; padding-bottom: 10vmax;}效果将盘算如下：padding-top = (10% of width) = 10% * 350 = 35px padding-bottom = (10% of width) = 10% * 350 = px视口单元与百分比有何差别？视口单元基于页面的根元素，而百分比则基于它们所在的容器。

由于这个原因，它们相互差别，每个都有自己的用例。视口单元的用例在以下各节中，我将探讨视口单元的一些用例以及如何在项目中实现它们。字体巨细CSS视口单元很是适合响应式排版。

例如，我们可以将以下内容用作文章标题：.title { font-size: 5vw;}标题的 font-size 将凭据视口宽度增加或缩小。就像提供的字体巨细是视口宽度的5％一样。然而，在没有适当测试的情况下使用它可能很有诱惑力。让我们看看下面的视频：请注意，字体巨细在移动巨细中变得很小，这对可会见性和用户体验倒霉。

据我所知，移动设备上的最小字体巨细不应该凌驾 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％。这称为全屏部门。为此，我们可以使用视口高度单元。

.section { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;}通过添加 height: 100vh，我们可以确保剖面高度将占据视口的100％。另外，我添加了一些flexbox来处置惩罚内容的水平和垂直居中位置。

粘性页脚在大屏幕上，您可能会注意到网站内容很短，而且页脚没有停留在底部。这是正常现象，并不认为这是一种不良做法。可是，另有革新的空间。思量一下代表这个问题的下图：为相识决这个问题，我们需要使主要内容的高度即是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;}这样一来，此问题已获得解决，无论内容是非，我们的页脚都市粘滞。Responsive 元素假设我们有一个作品集来展示我们的响应式设计事情，而且我们有三种设备(移动设备、平板电脑和条记本电脑)。

每个设备包罗一个图像。目的是使这个100%响应CSS。通过使用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;}从容器中挣脱出来我注意到一个最适合编辑结构的用例。

一个子元素，纵然父元素的宽度受到限制，它也会占据视口100％的宽度。思量下图：为了到达类似的效果，我们可以使用视口单元和一些定位属性。这是CSS：.break-out { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;}让我们对其举行剖析，以便我们逐步相识所有这些事情原理。

1.添加width: 100vw最重要的步骤，将使图像的宽度即是视口的100％。2.添加margin-left: -50vw为了使图像居中，我们将需要为其提供负的页边距，且其宽度为视口宽度的一半。3.增加left: 50%最后，我们需要将图像向右推，其值为父宽度的50％。

垂直和水平间距我想到的另一个有趣的用例是使用viewport单元来表现元素之间的间距。可以与 margin，top，bottom 和grid-gap 等值一起使用。使用时，间距将基于视口宽度或高度，这可能有助于使结构更动态。

模态对于模态，我们需要将它们从视口顶部推入。通常，我使用top属性举行此操作，并使用百分比或像素值。可是，对于视口单元，我们可以添加一个可以凭据视口高度改变的间距。

可是，对于视口单元，我们可以添加一个可以凭据视口高度改变的间距。.modal-body { top: 20vh;}请参阅下面的视频以获取最终效果。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 单元用于页面标题的填充，以及标题下方的边距。注意间距如何变化！Grid Of Items动态间距的另一个用例是项目网格。

它可以用于任何内容，例如文章网格，服务部门等。对于我们的情况，我们将看看如何将其用于文章网格。通过在网格 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;}垂直媒体查询和视口单元横向模式下的全屏通过使用垂直媒体查询，我们可以检查用户的手机或平板电脑是否处于横向模式。如果是这样，那么使用 height:100vh 截取视口的整个高度将毫无意义。要解决该问题，我们可以执行以下操作：@media (min-height: 400px) { .section { height: 100vh; }}或者我们可以使用定向媒体查询：@media (orientation: landscape) { .section { height: 100vh; }}长宽比我们可以使用 vw 单元建立响应元素，以保持其宽高比，而不管视口巨细如何。让我们来探索一下。

我们将需要确定所需的宽高比。对于此示例，我将使用 9/16。section { /* 9/16 * 100 */ height: 56.25vw;}将视口单元用于图形元素。

我不确定我的命名是否正确，但希望您能从以下直观示例中获得我的明白。盛行的顶部边框你知道现在大多数网站使用的顶部边框吗？大多数情况下，它的颜色与品牌颜色相同，这将赋予它一些个性。我们支持边框的初始值为 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;}节编号对于带有计数器或图标的部门项目，我们可以使用视口单元的使用。

参见下面的模型：我们有一个包罗数字的圆，而且有文本内容。两者都需要使用视口单元流通地调整巨细。让我们探讨一下！/**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] */}原文：https://ishadeed.com/article/viewport-units/翻译：做工程师不做码农本头条号聚焦大前端技术和法式员发展，如果对你有所启发和资助，可以点个关注、收藏，也可以留言讨论，这是对作者的最大勉励。作者简介：Web前端工程师，全栈开发工程师、连续学习者。

本文关键词：开云手机app

本文来源：开云手机app-www.qing880.com