CSS媒体查询由于某种原因不起作用答案

【问题标题】：CSS Media query not working for some reasonCSS媒体查询由于某种原因不起作用
【发布时间】：2014-05-11 09:46:22
【问题描述】：

我需要在 2012 年构建一个响应式网站。我正在编辑 style.css 文件（Wordpress 网站），但媒体查询由于某种原因无法正常工作。已经在网上查了css文件，媒体查询在里面。

我说的网站是www.carter-realestate.be 媒体查询没有问题，我之前已经做过一百次了。带有媒体查询的style.css文件已经上线，大家可以去看看。

有人知道这个的解释吗？

【问题讨论】：

你能用这个发布一些代码吗？
@Gab 你有一个充满代码的网站。问题已经解决了。
好吧，既然问题已经解决并且似乎已经在网站上修复，这个问题对于遇到同样问题的其他用户来说变得不那么重要了。通过简单地发布一个代码 sn-p，当原始网站的代码得到修复时，这个问题仍然有意义。

标签： css media-queries media

【解决方案1】：

您的页面上有一些脚本正在重写@media 规则。

查看style.csss中的源代码我明白了：

@media all and(max-width: 900px){
body{
    background-color: red !important;
    color: blue;
}

h1{
    font-size: 15em;
}
}

但是在 Firebug 中检查它（通过 Firefox）我看到 DOM 中的代码更改为：

@media not all {
    body {
        background-color: #FF0000 !important;
       color: #0000FF;
    }
    h1 {
        font-size: 15em;
    }
}

某个脚本正在将@media 规则重写为“not all”。

尝试禁用 WordPress 插件中的所有脚本并刷新页面。如果这不起作用，请编辑 HTML 并注释掉所有剩余的脚本加载。然后一一添加一个脚本或插件，直到找到正在重写 DOM。

【讨论】：

【解决方案2】：

需要在“and”和“(”之间加一个空格

@media screen and (max-width: 900px){

【讨论】：

我怎么能监督这一点。非常感谢。尴尬

【解决方案3】：

尝试将其更改为：

@media only screen and(max-width: 900px){
    body{
        background-color: red !important;
        color: blue;
    }

    h1{
        font-size: 15em;
    }
}

【讨论】：

我的媒体查询中有些样式发生了变化，有些则没有。添加 !important 解决了这个问题。