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

Answer 2

尝试display:inline-block;

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

#img{
display:none;
}
}

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

#img{
display:inline-block;
}

css - @media不能与firefox和IE一起使用

2 个答案: