Question

使用媒体查询时，只有第一套似乎有用，我不知道为什么。如果我换掉它们，那么只有第一个可以工作。我已经尝试从最大宽度更改为最小宽度，我已经尝试删除和条件，我已经尝试删除所有我的Javascript。我已经尝试删除所有CSS，只使用body {display：none}进行媒体查询。媒体查询位于我的样式表的末尾。 Viewport meta是正确的（见下文）。

这些尝试都没有纠正我的问题。任何人都知道为什么会这样？我和@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之间的宽度..而且宽度> gt; 740px

但当然，BOTH媒体查询正在发挥作用......

请参阅 FIDDLE

Answer 2

没关系，弄清楚了。

在某种程度上，CSS中存在一个隐藏的角色。考虑到我自己键入了其他所有内容，也许是Dreamweaver将它放在那里，这很奇怪？可能是一个小故障？无论如何，将其复制到MS Word并将其粘贴回Dreamweaver中会修复它。

P.S谢谢你的帮助！

只有第一个媒体查询工作

2 个答案: