如何使用媒体查询在移动设备上将 3 列 CSS 网格更改为 1 列 [英] How to make 3 column CSS grid change into 1 column on mobiles with media query

查看：21
本文介绍了如何使用媒体查询在移动设备上将 3 列 CSS 网格更改为 1 列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 CSS Grid 在大屏幕上将文本与图片混合在一起.我希望他们在手机上形成一个专栏.台式机上基本上是 3 列，移动设备上基本上是 1 列.如何使用媒体查询实现它?我正在考虑在 768px 下找到禁用网格的命令，但我什至不知道是否存在这样的东西.

.history {显示:网格；网格模板列:1fr 1fr 1fr；填充:1em；网格行间距:100px；}.box1 {网格列:1/3；}.box2 {网格列:3；证明自我:中心；}.box3 {网格列:1；证明自我:中心；}.box4 {网格列:2/4；}.box5 {网格列:1/3；}.box6 {网格列:3；证明自我:中心；}.box7 {网格列:1/4；}

<div class="box1"><p>故事始于 2010 年的 Hartstown</p>
<div class="box2"><img src="images/clubs.jpg" alt="俱乐部">

<div class="box3"><img src="images/clubs1.jpg" alt="俱乐部">

<div class="box4"><h3>俱乐部正式合并... </h3><p>2011 年 5 月，Hartstown Aldridge Legends X1 在达利蒙特公园正式发布...</p>

<div class="box5"><h3>我们的第一个完整赛季... </h3><p>我们在 2011/2012 赛季开始时共有大约 280 家注册俱乐部，我们有 18 支球队......</p>

<div class="box6"><img src="images/logo.jpg" alt="标志">

<div class="box7"><h3>勇往直前... </h3><p>我们目前有大约 400 名注册俱乐部球员和大约 60 支 2 支超过 35'5 的球队，而且我们还在不断增长......</p>

解决方案 

@media only screen and (max-width: 768px) {.历史 {显示:网格；网格模板列:1fr；填充:1em；网格行间距:100px；}}

只需在页面中添加您希望在移动设备上看起来像的元素的 CSS 属性即可.max-width 表示任何设备的屏幕尺寸，小于 768px 将显示此 CSS 样式覆盖默认样式.

制作 grid-template-columns: 1fr; 将使用设备屏幕的全宽，这是您的要求.

请注意:仅将 @media 查询放在默认 CSS 样式之后.

I'm using CSS Grid to make text mixed with pictures on the large screens. I want them to form a column on mobiles though. Basically 3 columns on desktops and 1 column on mobile devices. How to make it happen using media query? I was thinking about finding command for grid to disable while under 768px but don't even know if such a thing exist. 

.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>

解决方案 

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

Just add the CSS properties of elements in your page that you want to look like on mobile. max-width means any device's screen size, less than 768px will show this CSS styles overriding the default styles.

Making grid-template-columns: 1fr; will make use of full width of the device screen, which is your requirement.

Please note: Put the @media queries only after the default CSS styles.

这篇关于如何使用媒体查询在移动设备上将 3 列 CSS 网格更改为 1 列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆