我有这个简单的媒体查询来检查浏览器的分辨率，从而显示或隐藏图像...但是它仅在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>
如果没有看到您的html，我将假定您正在尝试隐藏ID为image？的图像。如果是这样，我将执行以下操作。
将id更改img为一个类，例如，我们将使用它，.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;
}
}
看到这个小提琴
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句