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

Posted 2023-03-06

【中文标题】CSS媒体查询由于某种原因不起作用

【英文标题】：CSS Media query not working for some reason

【发布时间】：2014-05-11 09:46:22

【问题描述】：

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

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

有人知道这个的解释吗？

【问题讨论】：

你能用这个发布一些代码吗？

@Gab 你有一个充满代码的网站。问题已经解决了。

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

【参考方案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 解决了这个问题。