CSS Viewport 单位，不少人还不知道使用它来快速布局！

时间  2020-07-03
标签 css viewport 单位 不少 还不 知道 使用 快速 布局 栏目 CSS 繁體版
原文   原文链接
做者：Ahmad shaded
译者：前端小智
来源：sitepoint
点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。css

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

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

简介

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

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

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

视口宽度

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

clipboard.png

假设咱们有一个元素与如下CSS：微信

.element {
    width: 50vw;
}

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

width = 500*50% = 250px

视口高度

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

clipboard.png

咱们有一个元素与如下CSS:

.element {
    height: 50vh;
}

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

height = 290*70% = 202px

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

Vmin 单位

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

咱们如下面的例子为例。

clipboard.png

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

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

这是vmin的计算方式：

clipboard.png

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

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

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

Vmax 单位

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

clipboard.png

咱们如下面的例子为例。

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

clipboard.png

计算结果以下:

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

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

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

视口单位的用例

字体大小

clipboard.png

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高度单位。

clipboard.png

.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 没有粘在底部。这很正常，也不被认为是一种很差的作法。可是，还有改进的余地。考虑下面表明问题的示图：

clipboard.png

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

clipboard.png

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

响应式元素

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

clipboard.png

经过使用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;
}

!
clipboard.png
例：https://codepen.io/shadeed/pe...

从容器中挣脱出来

我注意到一个用例最适合编辑版面。 一个子元素，即便父元素的宽度受到限制，它也会占据视口100％的宽度。 考虑下面：

clipboard.png

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

让咱们把它分解一下，这样咱们就能一点一点地理解全部这些属性是如何工做的。

1.添加 width: 100vw

最重要的一步，将图像的宽度设置为100%的视口。

clipboard.png

2.添加 margin-left: -50vw

为了使图像居中，咱们须要给它一个负的边距，其宽度为视口宽度的一半。

clipboard.png

3.添加 left: 50%

最后，咱们须要将图像向右推，其值为父宽度的50％。

clipboard.png

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

垂直和水平间距

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

模态框

对于模态，咱们须要将它们从视口顶部推入。 一般，使用top属性进行此操做，并使用百分比或像素值。 可是，对于视口单位，咱们能够添加一个能够根据视口高度改变的间距。

clipboard.png

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

流行的顶部边框

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

clipboard.png

咱们支持边框的初始值为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`);

clipboard.png

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

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

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

交流

文章每周持续更新，能够微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程