乐趣区

关于css:使用-CSS-Viewport-完成响应式布局

作者:Ahmad shaded
译者:前端小智
起源:sitepoint

点赞再看 ,微信搜寻【大迁世界】,B 站关注【前端小智】 这个没有大厂背景,但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录,文章的已分类,也整顿了很多我的文档,和教程材料。

最近开源了一个 Vue 组件,还不够欠缺,欢送大家来一起欠缺它,也心愿大家能给个 star 反对一下,谢谢各位了。

github 地址:https://github.com/qq44924588…

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

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

简介

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

视口单位为:vwvhvminvmax

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示意视口的宽度和高度中的较小值,也就是vwvh 中的较小值。如果视口宽度大于其高度,则将依据高度计算该值。

咱们以上面的例子为例。

咱们有一个横屏手机,其中有一个元素具备 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 单位

vmaxvmin 相同, 该值是vwvh 中的较大值。

咱们以上面的例子为例。

.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和视口单位

如果 headerfooter 的高度是固定的,那么能够将 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- * 属性,也用于 borderborder-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…

垂直和程度间距

我想到的另一个乏味的用例是应用视口单位来示意元素之间的间距。这能够与 margintopbottomgrid-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 和欠缺,大家面试能够参照考点温习,另外关注公众号,后盾回复 福利,即可看到福利,你懂的。

退出移动版