作者：Ahmadshaded译者：前端小智来源：sitepoint点赞再看，养成习惯本文已收录到GitHubhttps://github.com/qq44924588...中期间高赞文章分类也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。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(最小宽度:1800px){.title{字体大小:40px;}}通过重新设置字号，我们可以保证字号不会太大。您可能还需要添加多个媒体查询，但这取决于您并取决于项目的上下文。示例地址：https://codepen.io/shadeed/pe...有时候点击全屏预览，我们需要一个section来获取100%的viewportheight，为此，我们可以使用viewportheightunit。.section{高度：100vh；显示：弹性；弹性方向：列；证明内容：居中；align-items:center;}通过添加height:100vh我们可以确保部分高度将占据视口的100%。此外，我们添加了一些flexbox来处理水平和垂直居中的内容。示例源码：https://codepen.io/shadeed/pe...粘性布局（footer）在大屏幕上，有时网站内容很少，footer没有粘到底部。这是正常的，不被认为是不好的做法。然而，还有改进的余地。考虑下图表示问题：为了解决这个问题，我们需要给内容一个等于视口高度-(header+footer)的高度。动态地执行此操作很困难，但使用CSS视口，这很容易。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。第一种解决方案：计算和视口单位如果页眉和页脚的高度是固定的，那么您可以将calc()函数与视口单位结合使用，如下所示：header,footer{height:70px;}main{height:calc(100vh-70px-70px);}无法保证此解决方案始终有效，尤其是对于页脚。在我的职业生涯中，我没有使用固定高度的页脚，因为这种页脚在例如不同的屏幕尺寸。2.方案二：Flexbox和viewportunits（推荐）通过设置body元素的高度为100vh，然后可以使用flexbox让main元素占据剩余的空间。身体{最小高度：100vh;display:flexflex-direction:column;{main{/*这样会让主元素动态占用剩余空间*/flex-grow:1;}这样，问题就解决了，不管内容长度是多少，我们都有一个粘性页脚。示例源代码：https://codepen.io/shadeed/pe...响应式元素假设我们有一个作品集来展示我们的响应式设计作品，并且我们有三种设备（手机、平板电脑和笔记本电脑）。每个设备都包含一个图像。Target使用CSS响应式地调整这些页面。通过使用CSS网格和视口单元，我们可以使它完全动态和响应。
