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

Posted

技术标签:

【中文标题】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 解决了这个问题。

以上是关于CSS媒体查询由于某种原因不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Chrome 设备模式模拟媒体查询不起作用

媒体查询在 React 中不起作用

为啥我的媒体查询代码在 CSS 中不起作用?

CSS媒体查询不起作用[重复]

CSS 媒体查询在移动设备上不起作用

CSS 媒体查询在三星 Galaxy 上不起作用