如何用一簡單的CSS制作響應式HTML網頁

如何用簡單的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發生的一樣。