如何使用媒體查詢在手機上將 3 列 CSS 網格更改為 1 列

Question

我正在使用 CSS 網格在大屏幕上將文本與圖片混合。 不過，我希望他們在手機上形成一個專欄。 桌面上基本上是 3 列，移動設備上是 1 列。 如何使用媒體查詢實現它？ 我正在考慮在768px以下找到禁用網格的命令，但甚至不知道是否存在這樣的東西。

 .history { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 1em; grid-row-gap: 100px; }.box1 { grid-column: 1/3; }.box2 { grid-column: 3; justify-self: center; }.box3 { grid-column: 1; justify-self: center; }.box4 { grid-column: 2/4; }.box5 { grid-column: 1/3; }.box6 { grid-column: 3; justify-self: center; }.box7 { grid-column: 1/4; }

 <div class="history"> <div class="box1"> <p> The story starts in 2010 with Hartstown </p> </div> <div class="box2"> <img src="images/clubs.jpg" alt="Clubs"> </div> <div class="box3"> <img src="images/clubs1.jpg" alt="Clubs"> </div> <div class="box4"> <h3>Clubs Officialy Merge... </h3> <p>May 2011 saw the Official launch of Hartstown Aldridge Legends X1 in Dalymount Park... </p> </div> <div class="box5"> <h3>Our First Full Season... </h3> <p>We started the 2011 / 2012 Season with Approx 280 registered club altogether we had 18 Teams….. </p> </div> <div class="box6"> <img src="images/logo.jpg" alt="Logo"> </div> <div class="box7"> <h3>Forging Ahead... </h3> <p>We presently have approx 400 Registered Club Players and approx 60 nd 2 Over 35'5 Teams and we are still growing... </p> </div> </div>

Answer 1

 @media only screen and (max-width: 768px) { .history { display: grid; grid-template-columns: 1fr; padding: 1em; grid-row-gap: 100px; } } 

只需在頁面中添加要在移動設備上顯示的元素的CSS屬性即可。 max-width表示小於768px像素的任何設備的屏幕尺寸都將顯示此CSS樣式，以覆蓋默認樣式。

制作grid-template-columns: 1fr; 將使用設備屏幕的整個寬度，這是您的要求。

請注意：僅在默認CSS樣式之后放置@media查詢。

Answer 2

我知道您在上面還有另外兩個答案，並且選擇了其中一個作為首選-但最簡單，最優雅的解決方案是將.history聲明為其中的一個塊，這將使您不必重新設置所有框 ，這讓您頭疼您的小型設備媒體查詢。 這就對了。 一線換。

@media only screen and (max-width: 768px) {
    .history {
       display: block;
    }
}

我在上面的代碼段中對其進行了測試，僅更改了“ display：grid;” “顯示：阻止；” 所有塊元素都將堆疊在一起，從而使瀏覽器能夠像往常一樣運行。

如果您還有其他問題，請聯系我。

Answer 3

添加應該觸發更改的屏幕的媒體查詢寬度，然后在其中添加.history {grid-template-columns：1fr; }

如果看起來不太好，請再調整CSS。

Answer 4

檢查是否有任何網格項目跨越，如果有，請消除媒體查詢中的跨越。