css - @media 不适用于宽度小于 1024px 的情况

Question

我有一个由 div 组成的 flex-box 网格。我想根据屏幕大小更改该 div 的宽度(以 % 为单位)。

我的 scss @media :

   @media (max-width: 1023.9px) {
      width: 33.3333%;
    }

    @media (max-width: 768px) {
      width: 50%;
    }

    @media (max-width: 599px) {
      width: 100%;
    }

    @media (min-width: 1024px) {
      width: 25%;
    }

但是当我在 Chrome 的响应工具中测试它时，我只得到了这个:

500px宽度的情况下，不变，

当我将屏幕尺寸更改为 1020 时，没问题，max-width: 1023.9px工作中。1200 可以，min-width: 1024px工作中。但小于 1024 - 我得到了奇怪的东西。我做错了什么？

为我的网格类生成的 css:

.image-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  background-color: #f6f6f6; }
  .image-grid .image-wrapper {
    width: 25%;
    position: relative; }
    .image-grid .image-wrapper::before {
      display: block;
      content: '';
      width: 100%;
      padding-top: 88.23529%; }
    @media (max-width: 1023.9px) {
      .image-grid .image-wrapper {
        width: 33.3333%; } }
    @media (max-width: 768px) {
      .image-grid .image-wrapper {
        width: 50%; } }
    @media (max-width: 599px) {
      .image-grid .image-wrapper {
        width: 100%; } }
    @media (min-width: 1024px) {
      .image-grid .image-wrapper {
        width: 25%; } }

嗯，现在当我调整浏览器窗口大小时它工作正常，我通常得到 1 列 550 像素和 2 列 700 像素。问题已回答，但在“响应式”工具中，550px 和 700px 仍然无法正常工作。也许我不了解该工具。

终于解决了。问题完全是愚蠢的:我忘了添加 meta标签，因此响应工具无法正常工作。不要忘记那条重要的线。 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 1

CSS 中的每条规则都可以覆盖同一选择器之前的任何规则。因此，您只需切换代码即可使其正常工作:

@media (max-width: 1023.9px) {
  width: 33.3333%;
}

// experimental
@media (max-width: 1000px) {
  width: 50%;
}

@media (max-width: 768px) {
  width: 50%;
}

@media (max-width: 599px) {
  width: 100%;
}

//
@media (min-width: 1024px) {
  width: 25%;
}

你的规则相互覆盖的原因是因为它们都有相同的选择器，而 max-width: 599px 是准确和正确的，后来出现的 max-width: 1023.9px 也是，因此它覆盖了 max-width: 599px 媒体查询中的先前 width: 100%;。

还有一个旁注:仅对媒体查询使用整数值。世界上没有屏幕具有 .9 甚至 .5 像素。