**CSSViewport单元**在过去几年中一直存在，随着时间的推移，越来越多的开发人员开始使用它们。它们的好处是它们为我们提供了一种无需使用JavaScript即可动态调整大小的方法。而且，如果它失败了，还有大量的备份。在本文中，我们将了解CSSViewport单元及其使用方法，并列出一些常见问题及其解决方案和用例，让我们开始吧。简介根据CSS规范，视口百分比单位是相对于初始包含块的大小而言的，初始包含块是网页的根元素。视口单位是：vw、vh、vmin和vmax。vw单位表示根元素宽度的百分比。1vw等于视口宽度的1%。视口宽度vw单位代表根元素宽度的百分比，1vw等于视口宽度的1%。假设我们有一个元素，CSS如下：.element{width:50vw;}当视口宽度为500px时，50vw的计算方式如下width=500*50%=250px视口高度vh单位代表根元素高度的百分比，avh等于视口高度的1%。我们有一个元素，CSS如下：.element{height:50vh;}当视口高度为290px时，70vh计算如下：height=290*70%=202px大家都说简历里没项目可写，所以我给你找了一个项目，还自带【搭建教程】。Vmin单位vmin表示视口宽和高的较小值，即vw和vh的较小值。如果视口宽度大于其高度，则该值将从高度计算。我们以下面的例子为例。我们有一个带有vmin单元元素的横向手机。在这种情况下，该值将根据视口高度计算，因为它小于宽度。.element{padding-top:10vmin;padding-bottom:10vmin;}这就是vmin的计算方式：如您所料，结果看起来像padding-top=(10%ofheight)=10%*164=16.4pxpadding-bottom=(10%ofheight)=10%*164=16.4pxVmax单位vmax与vmin相反，是vw和vh的较大值。我们以下面的例子为例。.element{padding-top:10vmax;padding-bottom:10vmax;}计算结果如下：padding-top=(10%ofwidth)=10%*350=35pxpadding-bottom=(10%ofwidth)=10%*350=35px视口单位与百分比有何不同？视口单位基于页面的根元素，而百分比基于它们所在的容器。因此，它们彼此不同，但各有各的用处。视口单位字体大小的用例CSS视口单位非常适合响应式排版。例如，我们可以为文章标题使用以下内容：.title{font-size:5vw;}标题的字体大小将根据视口宽度增大或缩小。就像提供的字体大小是视口宽度的5%。但是，未经适当测试就使用它可能会有点混乱。让我们看下面的视频：Bodysize变得非常小，这不利于可访问性和用户体验。据我所知，手机上的最小字体大小不应小于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/fa989837c6379770cce49f0be6daa3e3Fullscreen有时，我们需要一个部分来获得100%的视口高度，为此，我们可以使用视口高度单位。.section{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;}通过添加height:100vh我们可以确保部分高度将占据视口的100%。此外，我们添加了一些flexbox来处理水平和垂直居中的内容。示例源代码：https://codepen.io/shadeed/pen/dc4e82f3c873cc64ae5c5bc4a3f4ef9f?editors=1100Stickylayout(footer)在大屏幕上，有时网站内容很少，footer没有粘在底部。这是正常的，不被认为是不好的做法。然而，还有改进的余地。考虑下图表示问题：为了解决这个问题，我们需要给内容一个等于视口高度-(header+footer)的高度。动态地执行此操作很困难，但使用CSS视口，这很容易。第一种解决方案：calc和viewportunits如果页眉和页脚的高度是固定的，那么可以将calc()函数与viewportunit结合起来，如下所示：header,footer{height:70px;}main{height:calc(100vh-70px-70px);}无法保证此解决方案始终有效，尤其是对于页脚。在我的职业生涯中，我没有使用固定高度的页脚，因为这种页脚在例如不同的屏幕尺寸。2.方案二：Flexbox和viewportunits（推荐）通过设置body元素的高度为100vh，然后可以使用flexbox让main元素占据剩余的空间。body{min-height:100vh;display:flexflex-direction:column;{main{/*Thiswillmakethemainelementtaketheremainingspacedynamically*/flex-grow:1;}这样，问题就解决了，无论内容长度如何，我们都有一个粘性页脚。示例源代码：https://codepen.io/shadeed/pen/c735b26b8fa97ee685b38084448b3f85?editors=1100响应式元素假设我们有一个作品集来展示我们的响应式设计作品，并且我们有三种设备（手机、平板电脑和笔记本电脑）。每个设备都包含一个图像。Target使用CSS响应式地调整这些页面。通过使用CSS网格和视口单元，我们可以使它完全动态和响应。
