如何使3列CSS网格更改为1列移动媒体查询

8wtpewkr 于 2023-01-27 发布在其他

关注(0)|答案(4)|浏览(168)

我正在使用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>

css

来源：https://stackoverflow.com/questions/49880534/how-to-make-3-column-css-grid-change-into-1-column-on-mobiles-with-media-query

4条答案

按热度按时间

wlzqhblo1#

@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;将利用设备屏幕的全宽，这是您的要求。
请注意：仅将@media查询放在默认CSS样式之后。

赞(0）回复(0）举报 2023-01-27

piah890a2#

我知道你在上面还有其他几个答案，其中一个是你选择的首选--但是最简单、最优雅的解决方案，它可以保存你省去 * 重置所有框 * 的麻烦，就是在你的小型设备媒体查询中声明.history作为一个块。

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

我在上面的代码片段上测试了它，仅仅改变了“显示：网格;“到”显示：block;'将允许浏览器正常运行，所有块元素堆叠。
如果你还有什么问题，就打电话给我。

赞(0）回复(0）举报 2023-01-27

ykejflvf3#

添加应触发更改的屏幕的媒体查询宽度并添加。history{ grid-template-columns：第1页; }
然后调整css更多，如果它看起来不好。

赞(0）回复(0）举报 2023-01-27

o0lyfsai4#

检查是否有任何网格项目跨越，如果有，摆脱跨越在您的媒体查询。

赞(0）回复(0）举报 2023-01-27

我来回答

如何使3列CSS网格更改为1列移动媒体查询

4条答案

相关问题

热门标签

最新问答