Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

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

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

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

1 个答案: