如何正确使用媒体查询来获得此结果？

Question

我想使用Angular 6构建响应式网页。我尝试使用引导程序来构建网页，但不幸失败了。所以最终我决定使用媒体查询。

这是我的代码：

.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-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。在“检查”窗格打开的情况下，您的浏览器窗口现在将在页面右上方显示width x height。

对于您的代码，我无法在您发送的第一个图像中重现结果（它的CSS与所提供的代码段明显不同）。

要按照您的意愿进行此工作，我建议您研究Flexbox，它相对较新且功能强大，因此绝对值得学习。