css - 如何正确使用媒体查询来达到这个结果呢？

Question

我想使用 Angular 6 构建一个响应式网页。我尝试使用 bootstrap 来实现，但失败得很惨。所以最终我决定使用媒体查询。

这是我的代码:

.width {
  width: 300px;
  height: 300px;
  display: inline-block;
  border: 1px solid blue;
}

.width1 {
  width: 800px;
  height: 300px;
  border: 1px solid blue;
  display: inline-block;
}

@media only screen and (max-width: 600px) {
  .width {
    background-color: black;
    width: 200px;
    height: 100px;
  }
  .width1 {
    width: 500px;
  }
}

<div class="container-fluid ">
  <div class="row">
    <div class="badge width col-md-offset-1  col-lg-offset-1 col-xl-offset-1">
      Hello I am in component 1.
    </div>

    <div class="badge width  col-md-offset-1 col-lg-offset-1 col-xl-offset-1">
      Hello I am in component2.
    </div>

    <div class="badge width  col-md-offset-1 col-lg-offset-1 col-xl-offset-1">
      Hello I am in component3.
    </div>
  </div>

  <br>
  <br>
  <br>

  <div class="row">
    <div class="badge width  col-md-offset-1 col-lg-offset-1 col-xl-offset-1">
      Hello I am in component 4.
    </div>

    <div class="badge width1 col-md-offset-1 col-lg-offset-1 col-xl-offset-1">
      Hello I am in component 5.
    </div>
  </div>
</div>

我在中等屏幕上得到的结果如下所示，这是我想要的结果:

但是，当我尝试使用“CTRL +”提高浏览器分辨率时，问题出现了。方框的方向变得困惑。但我希望我的结果看起来与在中等设置中一样。

以下是大屏幕上的结果截图。

我该如何解决这个问题？

Answer 1

我认为您需要做的是使用 CSS Grid 更好地实现，它将允许您使用很少的规则构建布局并且基本上没有媒体查询(如果您希望布局完全符合一直都一样)...看看这个:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(200px, auto);
  grid-gap: 20px;
}

.grid-item {
  border: 1px solid;
}

.item5 {
  grid-column: span 2;
}

section {
  background-color: blue;
  height: 100%;
  color: #FFF;
}

<div class="grid-container">
  <div class="grid-item item1">
    <section>
      Inner Section
    </section>
  </div>
  <div class="grid-item item2">Item 2</div>
  <div class="grid-item item3">Item 3</div>
  <div class="grid-item item4">Item 4</div>
  <div class="grid-item item5">Item 5</div>
</div>