作者：Ahmad shaded
译者：前端小智
起源：sitepoint
点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588... 上曾经收录，更多往期高赞文章的分类，也整顿了很多我的文档，和教程材料。欢送Star和欠缺，大家面试能够参照考点温习，心愿咱们一起有点货色。

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

CSS Viewport units(视口单位)在过来几年曾经呈现了，随着工夫的推移，越来越多的开发人员开始应用它们。它们的益处在于为咱们提供了一种不须要应用J avaScript 就能以动静的形式调整大小的办法。而且，如果它生效，也有很多备用计划。

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

简介

依据CSS标准，视口百分比单位绝对于初始蕴含块的大小，它是web页面的根元素。

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

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

视口宽度

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

假如咱们有一个元素与以下CSS：

.element {    width: 50vw;}

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

width = 500*50% = 250px

视口高度

vh单位示意根元素高度的百分比，一个vh等于视口高度的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% of height) = 10% * 164 = 16.4px padding-bottom = (10% of height) = 10% * 164 = 16.4px

Vmax 单位

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

咱们以上面的例子为例。

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

计算结果如下:

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

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

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

视口单位的用例

字体大小

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

.title {    font-size: 5vw;}

题目的font-size将依据视口宽度减少或放大。 就像提供的字体大小是视口宽度的5％一样。 然而，如果没有适当的测试就间接应用它可能会踩到坑。 让咱们看上面的视频：

体大小变得十分小，这不利于可拜访性和用户体验。据我所知，挪动设施上的最小字体大小不应该不于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/pe...

全屏

有时，咱们须要一个section来获取100%的视口高度，为此，咱们能够应用viewport高度单位。

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

通过增加 height: 100vh，咱们能够确保section 高度将采取100%的视口。此外，咱们增加了一些flexbox来解决程度和垂直居中的内容。

事例源码：https://codepen.io/shadeed/pe...

粘性布局(footer)

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

为了解决这个问题，咱们须要给内容(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。

事例源码：https://codepen.io/shadeed/pe...

响应式元素

假如咱们有一个作品集来展现咱们的响应式设计工作，并且咱们有三种设施(挪动设施、平板电脑和笔记本电脑)。每个设施蕴含一个图像。指标应用 CSS 来响应适配这些页面。

通过应用CSS网格和视口单位，咱们能够使其齐全动静的响应式。

<div class="wrapper">  <div class="device laptop"></div>  <div class="device mobile"></div>  <div class="device tablet"></div></div>

视口单位也能够用于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;}/* 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;}

!

例：https://codepen.io/shadeed/pe...

从容器中挣脱进去

我留神到一个用例最适宜编辑版面。 一个子元素，即便父元素的宽度受到限制，它也会占据视口100％的宽度。 思考上面：

.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％。

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

垂直和程度间距

我想到的另一个乏味的用例是应用视口单位来示意元素之间的间距。这能够与margin、top、bottom和grid-gap等值一起应用。应用时，间距将基于视口宽度或高度，这对于使布局更具动态性可能很有用。

模态框

对于模态，咱们须要将它们从视口顶部推入。 通常，应用top属性进行此操作，并应用百分比或像素值。 然而，对于视口单位，咱们能够增加一个能够依据视口高度扭转的间距。

.modal-body {    top: 20vh;}

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

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

页面头部

页面header 是充当页面介绍的局部。 它通常具备题目和形容，并且其中高低边缘的高度固定或填充

例如，有以下的CSS的款式：

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

应用vh单位用于页面题目的 paddding，以及题目下方的边距。 留神间距如何变动！

事例源码：https://codepen.io/shadeed/pe...

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

Vmin 和 Vmax 用例

该用例是对于页面题目元素的顶部和底部padding 。 当视口较小（挪动）时，通常会缩小padding 。 通过应用vmin，咱们能够在视口较小尺寸（宽度或高度）的根底上取得适合的顶部和底部 padding。

.page-header {    padding: 10vmin 1rem;}

事例源码：https://codepen.io/shadeed/pe...

纵横比

咱们能够应用vw单位创立响应元素，以放弃其纵横比，而不论视口大小如何。

首先，须要先确定所需的纵横比，对于此示例，应用9/16。

section {    /* 9/16 * 100 */    height: 56.25vw;}

事例源码：https://codepen.io/shadeed/pe...

风行的顶部边框

你晓得大多数网站应用的顶部边框吗？ 通常，它的色彩与品牌色彩雷同，这会赋予一些共性。

咱们反对边框的初始值为3px。 如何将固定值转换为视口对象？上面是如何计算它的等效的vw。

vw = (Pixel Value / Viewport width) * 100

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

对于咱们的示例，咱们为 header 增加以下款式：

.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;}

挪动端滚动问题

挪动设施中存在一个常见问题，即便应用100vh，也会滚动，起因是地址栏的高度可见。Louis Hoebregts 写了一篇对于这个问题的文章，并给出了一个简略的解决方案。

.my-element {  height: 100vh; /* 不反对自定义属性的浏览器的回退 */  height: calc(var(--vh, 1vh) * 100);}
// 首先，咱们失去视口高度，咱们乘以 1% 失去一个vh单位的值let vh = window.innerHeight * 0.01;// 而后，将`--vh`自定义属性中的值设置为文档的根目录一个属性document.documentElement.style.setProperty('--vh', `${vh}px`);

事例源码：https://codepen.io/shadeed/pe...

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

原文：https://ishadeed.com/viewport...

交换

文章每周继续更新，能够微信搜寻「 大迁世界 」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送Star和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。