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

來源:互聯網
上載者:User
如何用簡單的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發生的一樣。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.