Question

我有4张图片，我想让它们以1200px的形式显示在一行中然后992px和更低我希望2张图片显示在一个和其他2应该在下一行和768px和更低我想要一行中的一张图片。

当浏览器小于992px时，问题就出现了。只需加载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>

CSS

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

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

@media screen and (min-width: 1200px) {
  .gallery img {
    width: 24%;
  }
}

Answer 1

当浏览器小于992像素时出现问题chrome只加载768px规则。当然，因为768规则包含min-width: 768px，所以992px规则包含min-width: 992px

因此，在900px宽屏幕上min-width: 768px规则适用，因为它小于min-width: 992px

我想你应该使用max-width代替。

Answer 2

我发现从最小的屏幕尺寸开始并按照自己的方式工作是最简单的（这就是Bootstrap的工作方式）。因此，您的最小屏幕尺寸不需要媒体查询，因为它是默认设置的内容。

.gallery img {
  width: 51%;
}

然后，您可以将下一条规则放在min-width:768px规则中。一旦屏幕达到768px，每行切换到两个图像

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

最后，将您的上一条规则移至min-width: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%;
  }
}

查看此codepen以获取演示：https://codepen.io/noahjwhitmore/pen/MrBdMY

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

2 个答案: