媒体查询和使网格系统响应

Question

我对媒体查询有点熟悉，但是当涉及到多个不同大小和形状的 div 时，我完全迷失了。所以，如果有人愿意引导我完成整个过程，那就太好了。或者只是给我一些指示，这就是我真正想要的！现在我有 7 个独立的 div，都按我想要的方式放置，只是不确定如何保持它对不同设备的响应。

.wrapper {
  max-width: 900px;
  margin: 0 auto;
}

.wrapper > div {
  background-color: lightcoral;
  padding: 1em;
  color: white;
    
}.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
  grid-auto-rows: minmax(100px, auto);
}

.one {
  grid-column: 1;
  grid-row: 1;

}

.one:hover {
    opacity: .6;
}


.two:hover {
    opacity: .6;
}
.three:hover {
    opacity: .6;
}
.two { 
  grid-column: 2;
  grid-row: 1 /3;
}

.two:hover {
    opacity: .6;
}

.three {
  grid-column: 1;
  grid-row: 2 /3;
}
.four {
  grid-column: 3;
  grid-row: 1 / 4;
}
.five {
  grid-column: 1 /3;
  grid-row: 3;
}
.six {
  grid-column: 2 / 4;
  grid-row: 4 ;
}
.seven {
  grid-column: 1;
}

<div class="wrapper">
<div onclick="location.href='http://www.google.com';" style="cursor: pointer;" class="one"><div class="oneimage"></div><div class="onetext">Title here</div></div>
 <div onclick="location.href='http://www.google.com';" style="cursor: pointer;" class="two">Title here</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
  <div class="seven">Seven</div>


      </div>

感谢决定提前帮助我的人！

Answer 1

@media only screen and (max-width: 768px) {
 .wrapper {
   display: block;
 }
 .margin-bot {
   margin-bottom: 2px;
 }
}

我举了一个例子 here 说明了可能的解决方案。如果您将显示更改为移动设备上的块状显示，那么每个 div 都会堆叠在一起。如果您在 jsfiddle 中更改屏幕大小，您可以看到操作的变化。我还在每个 div 的底部添加了一些边距，因为它们相互接触。如果您需要任何进一步的帮助，请告诉我！

媒体查询和使网格系统响应

Media queries and making a grid system responsive

html

css

media

grid