如何用一简单的CSS制作响应式HTML网页

HTML 专栏收录该内容
125 篇文章 0 订阅

如何用简单的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发生的一样。

  • 9
    点赞
  • 3
    评论
  • 19
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值