如何正确使用媒体查询来实现这一结果？

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>

Answer 2

我认为您遇到的问题是使用Ctrl +以增加浏览器宽度。 Ctrl +只是为了便于访问而放大文本。

要在Chrome中有效管理浏览器/视口宽度，请右键单击您的页面，然后选择Inspect。打开Inspect窗格后，您的浏览器窗口现在将在页面右上方显示width x height。

至于你的代码，我无法在你发送的第一张图片中重现结果（它与提供的代码段明显不同）。

为了让你的工作符合你的需要，我建议你研究Flexbox，它相对较新而且相当强大，所以绝对值得学习。