如何使用媒体查询在手机上将 3 列 CSS 网格更改为 1 列

Question

我正在使用 CSS Grid 将文本与图片混合在大屏幕上。我希望他们在手机上形成一个专栏。台式机上基本上是 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; 将利用设备屏幕的整个宽度，这是您的要求。

请注意：@media 查询只能放在默认 CSS 样式之后。

Answer 2

我知道您在上面还有其他几个答案，您选择了其中一个作为首选 - 但这是最​​简单、最优雅的解决方案，它将让您不必重置所有框 , 是将 .history 声明为您的小型设备媒体查询中的一个块。这就对了。换行。

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

我在上面的 sn-p 上对其进行了测试，只是更改了 'display: grid;'到“显示：阻止；”将允许浏览器正常运行，所有块元素堆叠。

如果您还有其他问题，请联系我。

Answer 3

添加应该触发更改的屏幕的媒体查询宽度并添加 .history{ 网格模板列：1fr； }

如果不好看就多调整css。