3千字长文：CSS Viewport（视口）单位及应用

预计阅读需要17分钟

CSS Viewport单元已经存在了几年，随着时间的流逝，我看到开发人员越来越多地使用它们。它们的好处在于为我们提供了一种不需要使用JavaScript就能c T 9 a以动态的方式调整大小的方法。G Z ! f | Y ] q而且，如r r $ I A w + r $果它们失败了，很容易提供一个备用方案。

在本文中，我们将学习CSS视口单元及其使用方法，以及一些常见问题的用例和解决方案。让我们开始吧！

介绍

视口单位为：vw，vh，vmin 和 vmax。

视口宽度 vw 单位表示根元素宽度的百分比。一y T x | w ? X t $个 vw 等于视口宽度的1％。

3千字长文：CSS Viewport（视口）单位及应用

我们有一个= K 4 % T G具有以下CSS的元素：

.element {
    width: 50vw;
}

当视口的宽度为 500px 时，将如下计算 50vw：

width = 500*50% = 250px

Viewport Height

vh 单位表示根元素高度的百分比。 1 vh 等于视口高度的1％。

3千字长文：CSS Viewport（视口）单位及应用

我们有一个具有以下CSS的元素：

.element {
    heighG k t 0 2 h Q Ht: 50vh;
}

当视口的高度为 290px 时，将按以下方式计算 70vh：

height = 290*7C . f 3 [ 3 6 o0% = 202px

就是这样。让我们移动到另一种视口单位！

Vmin 单位

vmin 表示视口的宽度和高度的最小值。如果视口宽度大于其高度，则将根据高! 6 U s度计算该值。

让我们来看下面的例子。

我们有一个j 4 | k _处于横向模式的手机，一个元素具有 vmin 单位。在这种情况下，该值将根据视口高度来l 5 m H 0 I L ,计算，因为它小于宽度。

3千字长文：CSS Viewport（视口）单位及应用

.element {
    paddi[ j V 4ng-top: 10vmin;
    padding-bottom: 10vmi1 # E N q v # [ Gn;
}

这是 vmin 的计算方式：

3千字长文：CSS Viewport（视口）单位及应用

您可能会猜到，结果将如下计算：

padding-top = (10% of height) = 10% * 164 = 32px padding-bottom = (10% of height) = 10% * 164 = 32px

Vmax 单位

与vmin相反，该值是根据最大宽度和高度计算的。

3千字长文：CSS Viewport（视口）单位及应用

让我们来看下面的例子。

.elI b r = 9 ~ K iement {
    padding-top: 10vmax;
    padding-bottom: 10vm. W N Hax;
}
3千字长文：CSS Viewport（视口）单位及应用

结果将计算如下：

padding-top = (10% of width) = 10% * 350 = 35px padding-bottom = (10% of width) = 10% * 350 = px

视口单位与百分比有何不同？

视口单位基于页面的根元素，而百分比则基于它们所在的容器。由于这个原因，它们彼此不同，每个都有自己的用例。

视口单位的用例

在以下各节中，我将探讨视口单元的一些用例以及如何在项目中实现它们。E X [ t l z = w

字体大小

3千字长文：CSS Viewport（视口）单位及应用

CSS视口单位非常适合响应2 g t K W P式排版。例如，我们可] i 2 e r以将以下内容用作文章标题：

.title {
    font1 X ` d k x-size: 5vw;
}

标题的 font-size 将根据视口宽度增加或缩小。就p Y %像提供的字体大小是视口宽度的5％一样。

然而，在没有适当测试的情况下使用它可能很有诱惑力。让我们看看下面的视频：

3千字长文：CSS Viewport（视口）单位及应用

请注意，字体大小6 v L #在移动大小中变得很小，这对可访问性和用户体验不利。据我所知，移动设备上的最小字体大小不应该超过 14px。在GIF* N f q D * h q z中，字; U F 6体大小低于 10px。

要解决该问题，我们需要为标题提供最小字体大小，使其不能低于该大小。 CSS calc() 可以解救！

.) : i ! i o 8 p Ntitle {
    font-size: calc(14px + 2vw);
}

caY * ~ E ? e ~ Slc() CSS函数将具有一个基本的 14px 值，并将添加 2vw 的值。有了这些，字体大小值就不会变得太小。

要考虑的另一重要事项是字体大小在大屏幕（例如27英寸ik 6 h b v 5 RMac）上的A q E ?行为。会发生什Q - !么？好吧，你猜对了。字8 r n { p体大小达到 95px 左右，这是一个巨大的价值。为了避免这种情况，我们应该在某些断点处使用媒3 ] A ^ i r体查询并更改 font-size 大小。

@media (min-width: 1800px1 I ,) {
    .title {
        font-sizi e G / Ve: 40px;
    }
}

通过重置 font-size大小，我们可以确~ i Z P U z = A保大小不会太大。您可能还需要添加多个媒体查询，但这取决于您，并且取决于项目的上下文。

全屏部分

有时，我们需要一个剖面以占据视口高度的100％。这称为全屏部分。为此，我们可以使用视口高度单位。

3千字长文：CSS Viewport（视口）单位及应用

.section {
    hei| v 5 ] ]ght: 100vh;
    display: flex;
    flex-direction: column;
    justify-content:~ C S + L U 9 1 centeM  tr;
    align-items: center;
}

通过添加 h1 ; 3 # Peight: 100vh，我们可以确保剖面高度将占据视口的100％。另外，我添加了一些flexbox来处理内容的水平和垂直居中位置。

粘性页脚

在大屏幕上，您可能会注意到网站内容很短，并且页脚没有停留在底部。这是正常现象，并不认为这是一种不良做法。但是，还有改进的空间。考虑一下代表这个问题的下图：

3千字长文：CSS Viewport（视口）单位及应用

为了解决这个问题，我1 # 7 N们需要使主要内容的高度等于viewporb e z e A f Mt height - (header + footer)。动态地进行操作很棘手，但是使[ Y T 3 k E s用CSS视口单元，这非常容易。

1.第一个解决方案：计算和视口单位

如果页眉和页脚的高度固定，则可以将CSS calc() 函数与视口单位结合使用。方法如下：

h+ R F w Feader,
footer {
    heigZ $ [ht: 70px;
}

main {
    he N } ) 4 *ight: calc(100vh - 70px - 70px);
}

不能保证此解决方案始终有效，尤其是对于页脚而言。在我的职= - [ k 1 [业生涯中，我没有使用固定高度的页脚，因为在例如不同的屏幕尺寸下，此页脚是不可行的。

2.第二种解决Y ? = ) ~ h a方案：Flexbox和7 v % N F视口单元（o ( J [ e推荐）

通过将 100vh 添加为body元素的高度，然后可] D E G u J 1 Y F以使用flexbox来使ml t U ) / O 8 7ain元素占用剩余空间。

body {
    min-height: 100vh;
    dik + _ O O ] Osplay: flex
    flex-direction: column;
{

main {
    /* 这将使主元素动态地占用剩余的空间 */
    flex-grow: 1;
}

这样一来，此问, i T题D % : v s o p已得到解决，4 , y无论内容长短，我们的页脚都会粘滞。

3千字长文：CSS Viewport（视口）单位及应用

Responsive 元素

假设我们有一个作品集来展示我们的响应式设计工作，并且我们有三种设备(移动设备、平板电脑和笔记本, 4 V D t K电脑)。每个设备包含一个- x C f Y图像。目标是使这个100%响应CSS。

3千字长文：CSS Viewport（视口）单位及应用

通过使用CSS网格和视口( V @单位，我们可以使其完全响应和动态。

<div class=\"wrapper\">
  <div class=\"device laptop\"></div>
  &F - A z Z & ~ `lt;div class=\"device mobile\"></div>
  <div class=\"device tablet\"></div>
</div>

请注意，在 grid-* 属性中使Y + ` ~ M用了视口单位。它们也e d r x # _ m用于 border，border-radius和其他属性。所有这些将导致流畅的设计。

.wrF ? L O ) P ! uapper {
  display: grid;
  grid-template-columns: repG _ 2 j )eat(20, 5vw); 
  grid-auto-rows: 6vw;
}

.mobile { 
  position: relative;
  z-index: 1;
  grid-column: 2 / span 3;
  grid-row^ - ; U q |: 3 / span 5;
}
 
.tabr # ! w llet {
  position: relat3 @ H o f =ive;
  z-index: 1;
  grid-column: 13 / span 7; 
  grid-row: 4 / span 4;
  borde- ` j k N T ^ $r-bof 4 B Q j 4 D Xttom: 1vw solid #a9BI T P 6 49dd;
  border-right: solid 3vw #a9B9dd;
}
 
.laptop {
  position: rw M ~ u c U zelative;
  grid-column: 3/span 13;
  grid-row: 2 / span 8;
}

/* 视口单元用于底部、左侧、右侧、高度和3 0 ( 4 5 X边框半径。这不是很酷吗?*/
.laptop:after {
    content:\"\";
    position:absolute;
    bottom: -3vw;
    left: -5.5vw;
    right: -5.5vw;
    height: 3vw;
    background-color: #a9B9dd;
    border-rt b v & 3adius: 0 0 1vw 1vw;
}
3千字长文：CSS Viewport（视口）单位及应用

从容器中挣脱出来

我注意到N _ L t一个最适_ ~ P u a C X合编辑布局的用例。一个子元素，即使父元素的宽度受到限制，它也会占据视口100％的宽度。考虑下图：

3千字长文：CSS Viewport（视口）单位及应用

为了达到类似的效果，我们可以使用视口单位和一些定位属性。这是CSS：

.break-out {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

让我们对其进行分解，S g 0 _ ^ T h b K以便我们逐步了解所有这些工作原理。

1.添加width: 100vw

最重要的步骤，将使图像的宽度等于视口的1q 9 H T v00％。

3千字长文：CSS Viewport（视口）单位及应用

2.添加margin-left: -50vw

为了使图像居中，我们将需要为其提供负的页边距，且其宽度为视口宽度的一半。

3千字长文：CSS Viewport（视口）单位及应用

3.增加left: 50%

最后，我们需要将图像向右推，其值为父宽度的J 9 K ` [50％。

3千字长文：CSS Viewport（视口）单位及应用

垂直和水平间距

我想到的另一个有趣的用例是使用viewport单位来表示元素之间的间距。可以与 margin，top，bottom 和grid-gap 等值一起使用。使用时，间距将基于视口宽度或高度，这可能有助于使布局更动态。? : 6 o 5 t _ n c

模态

对于模态，我们需要将它们从视口顶部推入。通常，我使用tk S 0 R 0 I N Jop属性进行此操作，并使Z q % D n / p用百分比或像素值。但是，对于视口单位，我们可以添加一个可以根据视口高度改变的间距。

但是，对于视口单位，我们可以添加一个可以根据视口高度改变的7 a :间距。j k T

3千字长文：CSS Viewport（视口）单位及应用

.mo= Z b b u $dal-body {
    top: 20vh;
}

请参阅下面的视频以获取最终结果。

3千字长文：CSS Viewport（视口）单位及应用

Page Header

页面标题是充当页+ h ] @ {面介绍的部分。它通常E N ] [ E ` J R r具有标题和描述，并且其中上下边缘的高度固定或填充，我们对填充感兴趣。

例如，这是CSS的外观：

.page-header {C 2 = ; 4
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (min-width:i L U 5 800px) {
    .page-header {
        padding-top: 4_ g = 1 q } Crem;
        padding-bottom: 4rem;
    }
}

移动设备上的垂直填充很小，而较大的视口上的垂直填充更大。使用视口单位怎么办？c S ) a x G U让我们来探索一下。

.page-header {
    padding-top: 10vh;
    padding-bottom: 10vh;
}

.page-headv F m u - I Cer h2 {
    margin-bof V $ y 1 0ttm y v |  H 6 hom: 1.5vh;
}

我将 vh 单位用于页面标题的填充，以及标题下方的边距。注意间距如何变化！

3千字长文：CSS Viewport（视口）单位及应用

Grid Of Items

动态间距的另- P : Q e N *一个用例是项目网格。它可以用于任何内容，例如文章网格，服务部分等。I r v ,对于我们的情况，我们将看S a I看如何将( ? y其用于文章网格。

3千字长文：CSS Viewport（视口）单位及应用

通过在网格 grid-gap (间隙)内使用视口单位，我们可以获得所需Q 3 8 c 6 v的结果。注意，我也使用了CSS calc() 函数。使用 calc() 的目标是要有一 U c 个基本的垂直和水* V g平间隙。

.wrapper {
    display9 E { } ?: grid;
    gP q K Zrid-template-columns: repeat(aL d = | I 9 u r ruto-fit, minmax(250px, 1fr));
    gy V 2rid-gap: calc(14px + 1vh) calc(14px + 0.5vw);
}

Vmin 和 Vmax 示例

在研究这两个值的用例时，除了CSS-Tricks，我什么都没有找到。用例p T s $是关于页面标题元素的顶部和底部填充。当视口很小(移动)时，填充通常会减少。通过使用 vmin，我们可以根据视口较小的尺寸（宽度或高度）来设置顶部和底部的填充。

.page8 % @ S +-header {
    padding: 10vmins 6 S @ f 1rem;2 4 b
}
3千字长文：CSS Viewport（视口）单位及应用

垂直媒体查询和视口单位

横向模式下的全屏

通过使用垂直媒体查询，我们可以检查用户的手机或平板电脑是否处于横向模式。如果是这样，那么使用 height:100vh 截取视口的整个高度将毫无意义。

3千字长文：CSS Viewport（视口）单位及应用

要解决该问题，我们可以执行以下操作S Q 1 R . d 7 i *：

@media (min-height: 400px) {3  q
    .section~ t B {
        height: 100vh;
    }
}

或者我们可以使用定向媒体查询：

@media (oria 2 ! c ! Q + ^entation: landscape) {
    .section {
        height: 100vh;
    }
}

长宽比

我们可以使用 vw 单位创建响应元素l K _ {，以保持其宽高比，而不管视口t ^ |大小如何。让我们来探r $ i q l .索一下。

我们将需要确定所需的宽高比。对于此示例，我将使用 9/16。

section {
    /* 9/16 * 100 */
    height: 56.25vw;
}
3千字长文：CSS Viewport（视口）单位及应用

将视口单位用于图形元素。我不确定我的命名是否正确，但希望您能从以下直观示例中L r { c B 0 e得到我的理解。

流行的顶部边框( 0 g 4

你知道现在大多数网站使用的顶部边框吗？大多数情况下，它的颜色与品牌颜色相同，这将赋予它一些个性。

3千字长文：CSS Viewport（视口）单位及应用

我们支持边框的初始值为 3px。如何将固定值转换为viewport ？下面是如何计算它的等效的 vm 1 ! ]w。

vw = (Pixel Value / Viewport wH V / u ) v g Y 6idth) * 100

视口宽度用于估计像素值与所需 vw 单位之间的比率。

对于r s F Y g 3 $ n O我们的示例，以下是顶部边框的添加方式：

.header {
    border-top: 4px sol# d  / _id #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: e ! . { ? !;
}

节编号

对于带有计数器或图标的部分项目，我们可以利用视口单位的使用。参见下面的模型：

3千字长文：CSS Viewport（视口）单位及应用

我们有一个包含数字的圆，并且有文本内容。两者都需要使用视口单元流畅地调整大小。让我们探讨一下！

/**
1. 为伸缩、宽度和高度属性使用一个流体值。
2. 行高用于将文本垂直居中
3. Font size
4. 圆与文字之间的间# [ [ u 0 # U o _距
**/
.point:before {
    flex: 0 0 calc(24px + 4vw); /* [1] */
    width: calc(24px + 4vw); /* [1] */
    hn p q G b % r 0eight: calc(24px + 4vw); /* [1] */
    line-height: cm Q O f w [ A O ^alc(24px + 4vw); /* [2] */
    font-size: calc(14px + 1vw); /* [3] *` 0 A } o r P v 6/
    margin-right: calc(10px + 0.5vw); /* [4] * m ; # f = : g/
}
3千字长文：CSS Viewport（视口）单位及应用

原文：https:D = F o e//ishadeed.com/articW [ c p C ile/viewport-units/

翻译：做工程师不做码农

本头条号聚焦大前端技术和程序员成长，如果对你有所启发和帮助，可以点个关注、] ; m q L收藏，也可以留言讨论，这是对作者的最大鼓励。

作者简介：Web前端工程师，全栈开发工程师、持续学习者。

本文系本站编辑转载，文章版权归原作者所有，内容为作者个人观点，转载目的在于传递更多信息，并不代表本站赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请与本站联系，本站将在第一时间删除内容！
上一篇

未来5年中国网络视频行业发展趋势分析

下一篇

蛋包饭做法，治愈美食，比阳光还治愈！

你也可能喜欢

  • 暂无相关文章!

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示：点击验证后方可评论！

插入图片
返回顶部