请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需要一步,快速开始

搜索
开启左侧

web前台开发:一行css代码搞定响应式布局!

马上注册,分享更多源码,享用更多功能,让你轻松玩转云大陆。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图,它将根据屏幕的宽度来改变列的数量。最精彩的地方在于:所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起,也不必为每个屏幕创建媒体查询。ok,让我们发车吧。

XT3cs0O6Ga5CS0j0.jpg

设置

在本文中,我将继续使用我在第一篇 CSS Grid 布局教程文章中的网格布局。然后,我们将在文章末尾添加图片。下面是我们初始化网格的外观:
xUFZFXCVoSocMvIf.jpg

HTML 代码:

1

2

3

4

5

6



CSS 代码:
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}
让我们让列开始具有自适应特性吧。
基础响应单位: fraction

CSS 栅格布局带来了一个全新的值:fraction单位,fraction单位通常简写为fr,它允许你根据需要将容器拆分为多个块。
让我们将每一列更改为一个 fraction 单位宽:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px 50px;
}
结果是栅格布局将会把整个宽度分成三个 fraction,每列占据一个 fraction 单位,效果如下:
I8V66066FxvS7660.jpg

假如我们将grid-template-columns的值更改为1fr 2fr 3fr,第二列的宽度将会是其它两列的两倍。总宽现在是四个 fraction 单位,第二列占据两个 fraction 单位,其它列各占一个 fraction。效果如下:
C5XeBM7lfO7d8BKZ.jpg

总的来说,fraction 单位值将使你可以很容易的更改列的宽度。
高级响应

然而,上面列子并没有给出我们想要的响应性,由于网格总是三列宽。我们希望网格能根据容器的宽度改变列的数量。要做到这一点,你必需学习如下三个概念:
repeat

首先我们学习repeat函数。这是一个强大的指定列和行的方法。让我们使用repeat函数来更改网格:
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
}
在上面代码中,repeat(3, 100px)等于100px 100px 100px。第一个参数指定行与列的数量,第二个参数指定它们的宽度,因而它将为我们提供与开始时完全相同的布局:
O00SXU6xUeWKU60h.jpg

auto-fit

然后是auto-fit。让我们跳过固定数量的列,将3替换为自适应数量:
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, 100px);
grid-template-rows: repeat(2, 100px);
}
效果如下:
XM7E7WQ6Mjm9a5ep.jpg

现在,栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的 100px 宽的列。但假如我们将所有列硬写为 100px,我们将永远没法获得所需的弹性,由于它们很难填充整个宽度。正如你在上图看到的,网格通常在右侧留有空白。
minmax

为理解决上述问题,我们需要minmax。我们将 100px 替换为 minmax(100px, 1fr),代码如下:
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: repeat(2, 100px);
}
正如你所见,效果完美。minmax函数定义的范围大于或等于 min, 小于或等于 max
因而,现在每列将至少为 100px。但假如有更多的可用空间,栅格布局将简单地将其均分给每列,由于这些列变成了 fraction 单位,而不是 100px。
添加图片

最后一步是添加图片。这与 CSS Grid 布局无关,但让我们看下代码。
我们在每个网格中添加一个图片标签:
cmZnVMAVMeld9DEQ.jpg

为了使图片适应于每个条目,我们将其宽、高设置为与条目本身一样,我们使用object-fit:cover。这将使图片覆盖它的整个容器,根据需要,浏览器将会对其进行裁剪。
.container > div > img {
width: 100%;
height: 100%;
object-fit: cover;
}
效果如下:
Vlrl300RI3ZTJv4w.jpg

ok!现在你已经理解了 CSS Grid 布局中最复杂的概念之一了,请给自己一个赞吧。
浏览器兼容性

在结束本文前,我提下浏览器支持情况,在撰写本文时,全球77%的网站将支持 CSS Grid,而且比例还在逐步攀升。
我想想2018将是 CSS 网格布局的元年。它将获得突破,并成为前台开发者的必备技能,就像过去几年 CSS Flexbox 布局发生的情况一样。
“我自己是一名从事了5年前台的老程序员,辞职目前在做讲师,今年年初我花了一个月整理了一份最适合2019年学习的web前台干货,从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理,送给每一位前台小伙伴,这里是小白聚集地,欢迎初学和进阶中的小伙伴。"
加微信:webtutou123 (领取)
V06OV8ZM3lO556zx.jpg
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

广告招商