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媒体查询由于某种原因不起作用的主要内容,如果未能解决你的问题,请参考以下文章