只有一个css媒体查询会影响元素的样式（仅适用于Chrome，而不适用于Firefox）

Question

我无法弄清楚为什么这两个媒体查询中只有一个有效。

这是我的代码

/* Desktop screen code ... */

/* media queries start */

@media (min-width: 751px) and (max-width: 1024px) {
    .element {
        background-color: red;
    }
}

@media (max-width: 750px) {
    .element {
        background-color: blue;
    }
}

只有第一个查询（即751px和1024px之间的宽度）才有效，即使我交换查询的顺序或注释掉第一个查询，我也会得到相同的结果（在后一种情况下，第二个查询只会影响元素） 。

这有点令人沮丧，我很确定这一定是因为我没有看到一个非常明显的错误，所以我已经准备好了（并且很开心）在这里开悟。

编辑2：经过额外测试后，我意识到问题只存在于chrome（v70.0.3538.77）而不是firefox（v 63.0），在Ubuntu 16.04上运行。

Answer 1

你忘了关闭你的第一条规则

@media (min-width: 751px) and (max-width: 1024px) {
    .element {
        background-color: red;
    }
}  <----- This was missing

@media (max-width: 750px) {
    .element {
        background-color: blue;
    }
}

@media (min-width: 751px) and (max-width: 1024px) {
  .element {
    background-color: red;
  }
}

@media (max-width: 750px) {
  .element {
    background-color: blue;
  }
}

<div class="element">
  Test
</div>

Answer 2

您尚未关闭第一个媒体查询。在浪费堆栈时间之前检查语法5次：D

Answer 3

您是否尝试将两个查询都更改为

   @media only screen and (max-width: 1024px) and (min-width: 751px) {
    .element {
        background-color: red;
    }

@media only screen and  (max-width: 750px) {
    .element {
        background-color: blue;
    }
}

Answer 4

我以两种不同的方式解决了这个问题：

1）使用min-device-width而不是min-width。但是，这意味着当我在计算机上调整浏览器窗口大小时，媒体查询不会触发

2）将标签qazxsw poi插入html文件的qazxsw poi中。有了这个，一切都适用于chrome和firefox