css - 只有第一个媒体查询工作

Question

当使用媒体查询时，似乎只有第一组有效，我不知道为什么。如果我交换它们，那么仍然只有第一个有效。我试过从最大宽度更改为最小宽度，我试过删除和条件，我试过删除我所有的 Javascript。我试过删除我所有的 CSS，只有带有 body {display:none} 的媒体查询。媒体查询在我的样式表的末尾。视口(viewport)元是正确的(见下文)。

这些尝试都没有解决我的问题。任何人都知道为什么会这样吗？我与@media 合作过一百次，但从未遇到过这个问题。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

@media (max-width: 740px) and (min-width: 420px) {
    .product {
        width:45% !important;
        margin:10px 10px 10px 10px !important;
    }

    .products-container select {
        width:85%;
    }   
}​

@media (max-width: 340px) {
    body {
        display:none;
    }
}​

更新我检查过 FireFox 的控制台。我实际上收到以下错误:悬挂组合器。由于选择器错误，规则集被忽略。

我明白它想表达的意思，但查询的语法没有任何问题。

Answer 1

你的 media queries 就像现在一样，当屏幕宽度为 时启动

0-340px(第二个媒体查询)和

420px-740px(第一个媒体查询)

它们不适合 340px 到 420px 之间的宽度.. 以及 > 740px 的宽度

但可以肯定的是，两个媒体查询都在工作......

看到这个 FIDDLE