如何用简单的CSS制作响应式HTML网页
在这篇文章中,我将教你如何使用CSS网格来创建一个超级酷的图像网格,它随着屏幕的宽度而改变列的数量。
最赞的一点就是:这个响应式效果只需要添加一行CSS。
这意味着我们不必给HTML取很乱的类名(即col-sm-4,col-md-8),或者为每一个屏幕大小创建媒体查询。
现在让我们开始吧!
设置
对
于本文,我们将继续使用我们在第一篇CSS Grid文章中使用的网格。然后我们将在文章的最后添加图片。以下是我们的初始网格的外观:
这是HTML:
<DIV类= “容器”>
<DIV> 1 </ DIV>
<DIV> 2 </ DIV>
<DIV> 3 </ DIV>
<DIV> 4 </ DIV>
<DIV> 5 </ DIV>
<DIV > 6 </ div>
</ div>
然后是CSS:
.container {
display:grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:50px 50px;
}
注意:这个例子还有一些基本的样式,我不会在这里介绍,因为它和CSS Grid没有任何关系。如果这段代码让你感到困惑,我建议你阅读我5分钟学习CSS网格的文章,在这里我将介绍布局模块的基础知识。
让我们开始让列响应。
基本的响应式与分数单位
CSS网格带来了一个全新的值---分数单位。分数单位是fr,它允许你将容器分成尽可能多的分数。
让我们将每个列更改为一个分数单位的宽度。
.container {
display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-template-rows:50px 50px;
}
这里发生的事情是网格将整个宽度分成三部分,每一列都占用一个单位。结果如下:
如果我们将该grid-template-columns值更改为1fr 2fr 1fr,则第二列现在将是另外两列的两倍。现在的总宽度是四个分数单位,第二个占了两个,而其他的占了一个。这将是效果图:
换句话说,分数单位值使您可以非常容易地改变列的宽度。
先进的响应能力
然而,上面的例子并没有给我们想要的响应,因为这个网格总是三列宽。我们希望我们的网格使用容器的宽度来改变列的数量。要做到这一点,你必须学习三个新的概念。
重复()
我们将从这个repeat()函数开始。这是指定列和行的更强大的方法。让我们把我们原来的网格,并改变使用repeat():
.container {
display:grid;
grid-template-columns:repeat(3,100px);
grid-template-rows:repeat(2,50px);
}换句话说,repeat(3, 100px)是相同的100px 100px 100px。第一个参数指定了你想要的列数或行数,第二个参数指定了它们的宽度,所以这将给我们提供和我们刚开始一样的布局。
自动调整
然后是自动适应。让我们跳过固定数量的列,而是用3替换auto-fit。
.container {
display:grid;
grid-gap:5px;
grid-template-columns:repeat(auto-fit,100px);
grid-template-rows:repeat(2,100px);
}这会导致以下行为:
网格现在使用容器的宽度来改变列的数量。
它只是试图尽可能多地将100px宽的列安装到容器中。但是,如果我们将所有列的硬编码精确到100像素,我们将永远不会获得我们想要的灵活性,因为它们很少会添加到整个宽度。正如你在上面的gif中看到的,网格经常会在右侧留下空白。
MINMAX()
为了解决这个问题,我们需要最终的成分minmax()。我们将简单地替换100px minmax(100px, 1fr)。这是最终的CSS。
.container {
display:grid;
grid-gap:5px;
grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
grid-template-rows:repeat(2,100px);
}注意,所有的响应都发生在一行CSS中。这会导致以下行为:
正如你所看到的,完美的作品。该minmax()函数定义了大于或等于min且小于或等于max 的大小范围。
所以列现在总是至少100px。但是,如果有更多的可用空间,网格将简单地分配给每个列,因为列变成一个分数单位,而不是100像素。
添加图像
现在最后一步是添加图像。这与CSS Grid没有任何关系,但是我们还是要看代码。
我们将在每个网格项目内添加一个图片标签。
<div> <img src =“img / forest.jpg”/> </ div>
为了使图像适合项目,我们将它设置为与项目本身一样宽和高,然后使用object-fit: cover;。这将使图像覆盖整个容器,如果需要的话,浏览器将裁剪它。
.container> div> img {
width:100%;
height:100%
object-fit:cover;
}结果如下:
而就是这样!您现在知道了CSS Grid中最复杂的概念之一,所以请给自己一个机会。
浏览器支持
在我们结束之前,我还需要提及浏览器支持。在写这篇文章的时候,全球77%的网站流量支持CSS Grid,而且正在攀升。
我相信2018年将是CSS Grid的一年。它将获得突破,并将成为前端开发人员的必备技能。就像过去几年CSS Flexbox发生的一样。