如何通过媒体查询使3列CSS网格在移动设备上变为1列

Question

如何通过媒体查询使3列CSS网格在移动设备上变为1列

14

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

- kalibvb

4个回答

6

我知道你已经有了几个答案，其中一个是你选择的首选 - 但最简单、最优雅的解决方案，可以避免你不得不重置所有盒子的麻烦，就是在小设备媒体查询内声明.history为块。只需一行更改即可。

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

我在您提供的代码片段上进行了测试，仅将“display：grid;”更改为“display：block;”即可使浏览器像往常一样运行，所有块元素都会堆叠。

如果您有任何进一步的问题，请联系我。

- weo3dev

1

这是很久以前的事了，但是嘿，我在这里，正在尝试解决这个确切的问题。例如，当使用这种块级方法时，您会失去行间距。另一种方法是将容器更改为使用flex列而不是display block，从而保留行间距。 - plumpNation

1

正如@plumpNation所说，这绝对是最好、最简单的方法，因为它可以保持你的间隙样式完整。只需确保将网格容器设置为'display: flex'和'flex-direction: column'，它就能完美运行。 - ItsMIllerTime65

1

在媒体查询中添加屏幕宽度触发更改的条件，然后在那里添加以下代码：.history{ grid-template-columns: 1fr; }。如果看起来不好看，则进一步调整CSS。

- Lazar Nikolic

它不起作用。你认为原因可能是在大屏幕上将文本分散在两列中吗？我之前尝试过你的方法，但没有改变任何事情。基本上，我的网格格式看起来像这样：文本-文本图片图片文本-文本，其中文本在一行中分布在两列中。 - kalibvb

我真的不知道。你能否把你的代码放在CodePen或其他类似的网站上，以便我们能够准确地了解你在说什么。那将非常有帮助。 - Lazar Nikolic

0

检查是否有跨度的网格项，如果有，请在您的媒体查询中去掉跨度。

- bryanmayodi

这并没有回答问题。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。- 来自审核 - Webdeveloper_Jelle

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harish ST · Accepted Answer

@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样式之后。