CSS中Viewport单位如何实现快速布局

这篇文章主要介绍CSS中Viewport单位如何实现快速布局，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联专注于闵行企业网站建设,响应式网站设计,商城网站建设。闵行网站建设公司,为闵行等地区提供建站服务。全流程按需求定制设计，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务

**CSS Viewport units(视口单位)**在过去几年已经出现了，随着时间的推移，越来越多的开发人员开始使用它们。它们的好处在于为我们提供了一种不需要使用J avaScript 就能以动态的方式调整大小的方法。而且，如果它失效，也有很多备用方案。

在本文中，我们将学习 CSS Viewport units(视口单位)以及如何使用它们，并用列举一些常见问题及其解决方案和用例，让我们开始吧。

简介

根据CSS规范，视口百分比单位相对于初始包含块的大小，它是web页面的根元素。

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

vw单位表示根元素宽度的百分比。1vw等于视口宽度的1%。

视口宽度

vw单位表示根元素宽度的百分比，1vw等于视口宽度的1%。

CSS中Viewport单位如何实现快速布局

假设我们有一个元素与以下CSS：

.element {
    width: 50vw;
}

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

width = 500*50% = 250px

视口高度

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

CSS中Viewport单位如何实现快速布局

我们有一个元素与以下CSS:

.element {
    height: 50vh;
}

当视口高度为290px时，70vh计算如下:

height = 290*70% = 202px

大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。

Vmin 单位

vmin表示视口的宽度和高度中的较小值，也就是vw 和 vh 中的较小值。如果视口宽度大于其高度，则将根据高度计算该值。

我们以下面的例子为例。

CSS中Viewport单位如何实现快速布局

我们有一个横屏手机，其中有一个元素具有vmin单元。在这种情况下，值将根据视口高度计算，因为它小于宽度。

.element {
    padding-top: 10vmin;
    padding-bottom: 10vmin;
}

这是vmin的计算方式：

CSS中Viewport单位如何实现快速布局

正如你所猜测的，计算结果如下所示

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

Vmax 单位

vmax与vmin相反,该值是vw 和 vh 中的较大值。

CSS中Viewport单位如何实现快速布局

我们以下面的例子为例。

.element {
    padding-top: 10vmax;
    padding-bottom: 10vmax;
}

CSS中Viewport单位如何实现快速布局

计算结果如下:

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

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

视口单位基于页面的根元素，而百分比则基于它们所在的容器。因此，它们彼此不同，但各自都有各自的用处。

视口单位的用例字体大小

CSS中Viewport单位如何实现快速布局

CSS 视口单位非常适合响应式排版。例如，我们可以将以下内容用作文章标题：

.title {
    font-size: 5vw;
}

标题的font-size将根据视口宽度增加或缩小。就像提供的字体大小是视口宽度的5％一样。但是，如果没有适当的测试就直接使用它可能会踩到坑。让我们看下面的视频：

CSS中Viewport单位如何实现快速布局

体大小变得非常小，这不利于可访问性和用户体验。据我所知，移动设备上的最小字体大小不应该不于14px。在GIF中，不小于10px。

要解决该问题，我们需要为标题提供最小字体大小，可以使用 calc()

.title {
    font-size: calc(14px + 2vw);
}

calc()CSS函数将具有一个最小值14px，并在些基础上添加2vw的值，有了这些，字体大小值就不会变得太小。

另一个需要考虑的重要问题是字体大小在大屏幕上的表现，例如 27” iMac。会发生什么呢?你猜对了，字体大小为95px左右，这是一个很大的值。为了防止这种情况，我们应该在某些断点上使用媒体查询并更改字体大小。

@media (min-width: 1800px) {
    .title {
        font-size: 40px;
    }
}

通过重置字体大小，我们可以确保大小不会太大。您可能还需要添加多个媒体查询，但这取决于你自己，也取决于项目的上下文。

事例地址：https://codepen.io/shadeed/pen/fa989837c6379770cce49f0be6daa3e3

全屏

有时，我们需要一个p来获取100%的视口高度，为此，我们可以使用viewport高度单位。

CSS中Viewport单位如何实现快速布局

.p {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

通过添加 height: 100vh，我们可以确保p 高度将采取100%的视口。此外，我们添加了一些flexbox来处理水平和垂直居中的内容。

事例源码：https://codepen.io/shadeed/pen/dc4e82f3c873cc64ae5c5bc4a3f4ef9f?editors=1100

粘性布局(footer)

在大屏幕上，网站内容有时候很少，footer 没有粘在底部。这很正常，也不被认为是一种不好的做法。但是，还有改进的余地。考虑下面代表问题的示图：

CSS中Viewport单位如何实现快速布局

为了解决这个问题，我们需要给内容(content)一个高度，它等于视口高度- (header + footer)。动态地做到这一点是很困难的，但是使用CSS的视口，这是很容易的。

第一种解决方案:calc和视口单位

如果header 和footer的高度是固定的，那么可以将calc()函数和视口单位结合起来，如下所示：

header,
footer {
    height: 70px;
}
 
main {
    height: calc(100vh - 70px - 70px);
}

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

2.第二种解决方案：Flexbox和视口单位（推荐）

通过将100vh设置为body元素的高度，然后可以使用flexbox来使main元素占用剩余空间。

body {
    min-height: 100vh;
    display: flex
    flex-direction: column;
{
 
main {
    /* This will make the main element take the remaining space dynamically */
    flex-grow: 1;
}

这样，问题就解决了，无论内容长度如何，我们都有一个粘性footer。

CSS中Viewport单位如何实现快速布局

事例源码：https://codepen.io/shadeed/pen/c735b26b8fa97ee685b38084448b3f85?editors=1100

响应式元素

假设我们有一个作品集来展示我们的响应式设计工作，并且我们有三种设备(移动设备、平板电脑和笔记本电脑)。每个设备包含一个图像。目标使用 CSS 来响应适配这些页面。

CSS中Viewport单位如何实现快速布局

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

.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; } /* Viewport units are used for the bottom, left, right, height, and border-radius. Isn't that cool? */ .laptop:after { content:""; position:absolute; bottom: -3vw; left: -5.5vw; right: -5.5vw; height: 3vw; background-color: #a9B9dd; border-radius: 0 0 1vw 1vw; }

// 首先，我们得到视口高度，我们乘以 1% 得到一个vh单位的值 let vh = window.innerHeight * 0.01; // 然后，将`--vh`自定义属性中的值设置为文档的根目录一个属性 document.documentElement.style.setProperty('--vh', `${vh}px`);

大橙子网站建设，新征程启航

CSS中Viewport单位如何实现快速布局

其他资讯