Html 在不正确的浏览器大小上加载媒体查询规则

我有4个图像，我希望它们以1200像素的速度显示在一行中 然后992px和更低，我希望在一行中显示两张图片，其他两张图片应该放在下一行，在768px和更低，我希望在一行中显示一张图片

当浏览器小于992px时会出现问题chrome只加载768px规则

HTML

<section class="gallery">
  <div class="container">
    <img src="img/g1.png" alt="">
    <img src="img/g2.png" alt="">
    <img src="img/g3.png" alt="">
    <img src="img/g4.png" alt="">
  </div>
</section>

当浏览器小于992px时会出现问题chrome只加载768px规则。 当然，因为768规则包含

min-width:768px

，所以992px规则包含

min-width:992px

因此，在900px宽屏幕上，将应用

最小宽度：768px

规则，因为它小于

最小宽度：992px

---

我想你应该改用

max width

。

我发现从最小的屏幕尺寸开始，然后一步步向上（这就是引导的方式）。因此，您的最小屏幕大小不需要媒体查询，因为它是默认设置的

.gallery img {
  width: 51%;
}

然后，您可以将下一条规则放入

最小宽度：768px

规则中。一旦屏幕达到768px，切换到每行两个图像

@media (min-width: 768px) {
  .gallery img {
    width: 49%;
  }
}

最后，将最后一条规则移动到

最小宽度：992px

规则。屏幕点击992px后，切换到一行中的所有四个图像

@media (min-width: 992px) {
  .gallery img {
    width: 49%;
  }
}

总之

.gallery img {
  width: 51%;
}
@media (min-width: 768px) {
  .gallery img {
    width: 49%;
  }
}
@media (min-width: 992px) {
  .gallery img {
    width: 24%;
  }
}

---

请查看此代码笔的演示：

寻求代码帮助的问题必须包含在问题本身中重现代码所需的最短代码，最好是以最短的格式。看，768px规则中的宽度应该是100%，还是我误解了你的问题？

.gallery img {
  width: 51%;
}
@media (min-width: 768px) {
  .gallery img {
    width: 49%;
  }
}
@media (min-width: 992px) {
  .gallery img {
    width: 24%;
  }
}