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

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

#故事前端开发

在这篇文章中，我将教你如何使用CSS网格来创建一个超级酷的图像网格，它随着屏幕的宽度而改变列的数量。

最赞的一点就是：这个响应式效果只需要添加一行CSS。

这意味着我们不必给HTML取很乱的类名（即col-sm-4，col-md-8），或者为每一个屏幕大小创建媒体查询。

现在让我们开始吧！

设置

对

于本文，我们将继续使用我们在第一篇CSS Grid文章中使用的网格。然后我们将在文章的最后添加图片。以下是我们的初始网格的外观：

这是HTML：

 
  
 1  
  
 2  
  
 3  
  
 4  
  
 5  
  
 6  

然后是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没有任何关系，但是我们还是要看代码。

我们将在每个网格项目内添加一个图片标签。

为了使图像适合项目，我们将它设置为与项目本身一样宽和高，然后使用object-fit: cover;。这将使图像覆盖整个容器，如果需要的话，浏览器将裁剪它。

.container> div> img { 
    width：100％; 
    height：100％
    object-fit：cover; 
}

结果如下：

高清版全景原图

---

而就是这样！您现在知道了CSS Grid中最复杂的概念之一，所以请给自己一个机会。

浏览器支持

在我们结束之前，我还需要提及浏览器支持。在写这篇文章的时候，全球77％的网站流量支持CSS Grid，而且正在攀升。

我相信2018年将是CSS Grid的一年。它将获得突破，并将成为前端开发人员的必备技能。就像过去几年CSS Flexbox发生的一样。