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：经过额外的测试后，我意识到问题仅存在于在Ubuntu 16.04上运行的chrome（v70.0.3538.77）上，而不是在firefox（v 63.0）上。

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）将标记<meta name="viewport" content="width=device-width, initial-scale=1">插入html文件的<head>中。这样，一切都可以在chrome和firefox上使用

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

4 个答案: