0

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

这些尝试都没有解决我的问题。有人知道为什么会这样吗？我与@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 的控制台。我实际上收到以下错误：悬空组合器。由于选择器错误，规则集被忽略。

我明白它想说什么，但查询的语法没有任何问题。

4

2 回答 2

0

你media queries现在的样子，当屏幕宽度为

0-340px（第二个媒体查询）和

420px-740px（第一次媒体查询）

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

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

看到这个小提琴

于 2013-07-30T09:05:49.057 回答
0

没关系，想通了。

CSS中不知何故有一个隐藏的字符。考虑到我自己输入了其他所有内容，这很奇怪，也许 Dreamweaver 把它放在那里？可能是小故障？无论如何，将其复制到 MS Word 并将其粘贴回 Dreamweaver 即可修复它。

PS感谢您的帮助！

于 2013-07-30T09:22:56.813 回答