如何使用媒体查询在手机上将 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

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

如果不好看，再调整css。

Answer 2

@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 3

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

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

我在上面的代码片段中对其进行了测试，仅将 'display: grid;' 更改为 'display: block;' 将允许浏览器正常运行，所有块元素堆叠。

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

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

How to make 3 column CSS grid change into 1 column on mobiles with media query

html

css

css-grid