@media 查询在使用“仅屏幕”时不起作用答案

【问题标题】：@media query doesn't work when using "only screen"@media 查询在使用“仅屏幕”时不起作用
【发布时间】：2014-05-20 08:02:26
【问题描述】：

有以下媒体查询：

@media(max-width:980px){
/*Do something*/
}

以上方法可行，但是当我尝试这样做时：

   @media only screen and (max-width:980px){
    /*Do something*/
   }

没用！

在所有浏览器（桌面）上进行了测试。每次我尝试添加“仅屏幕”或除“@media”之外的任何其他内容（在括号之前）时，我都无法让它工作。我通常使用 SASS，并在主文件末尾包含一个 _responsive.sass 文件。这与我的视口设置有关吗？

<meta name="viewport" content="width=device-width" />

【问题讨论】：

只用于老浏览器，你真的需要吗？
不，只是想避免与打印查询发生冲突。但这没关系。我删除了“仅”，但仍然有同样的问题。每当我在媒体和左括号之间添加任何内容时，查询就会停止工作。
向我们展示您在 JSFiddle 上的一些工作，以便我们可以为您提供帮助。
如果您（或您的 SASS 编译器）正在使用版本早于 2.4.4 的 YUI 压缩器，则有一个已知错误会导致 and 后面的空格被删除，从而破坏媒体查询.见stackoverflow.com/questions/4144706/…。您应该检查提供给浏览器的 css 以确保空间存在。如果不是，请手动重新插入，更新您的 YUI 压缩器版本或使用其他压缩器。
@Ali Gajani：only 用于过滤掉旧版浏览器。它不被用于他们。

【解决方案1】：

不要只用，试试这个语法：

body{
    background-color:blue;
}

@media screen and (min-width: 500px){
    body{ background-color:red; }
}

【讨论】：

only 本身不应该有任何影响，除了过滤掉旧版浏览器。我很确定 OP 理解这一点，并且没有错误地尝试在旧版浏览器上进行测试（无论如何都没有支持媒体功能语法）。
删除“only”并在“and”之后添加一个空格来修复它。感谢所有观看它的人。