css - @media 不适用于 firefox 和 IE

Question

我有这个简单的媒体查询来检查浏览器的分辨率并相应地显示或隐藏图像......但它只适用于 Chrome 而不适用于 firefox 和 IE。知道我的代码有什么问题吗？或者有什么建议我可以做什么？

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

#img{
display:none;
}
}

@media screen and (min-width: 1031px)
{

#img{
display:block;
}
}

这是我的 HTML:

<div id="img"><img src="images/bg.png" height="575px" style="position:absolute; margin-left:6px;" style="z-index:100;"/></div>

Answer 1

在没有看到您的 html 的情况下，我会假设您正试图隐藏一个 ID 为 image 的图像？如果是这样，我会执行以下操作。

将 img 的 id 更改为一个类，例如我们将使用 .image-class 这意味着该样式可以在其他图像上重复使用作为 ID 的页面必须是唯一的。

所以你的 html 应该看起来像这样:

<img class="image-class" src="http://placekitten.com/500/500" alt="kitten" />

然后是你的 CSS:

/* Mobile first strategy (no media query required) - images will not display when under 1030px)*/
.image-class {
  display: none;
}

/* Images will display above 1030px */
@media screen and (min-width: 1030px) {
  .image-class {
    display: block;
  }
}

查看此 fiddle