如何用一簡單的CSS製作響應式HTML網頁__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發生的一樣。