使用bootstrap的媒体查询无法正常工作

Question

我想要为移动设备隐藏大图片。看at this site我在我的css中添加了以下样式：

//medium+ screen sizes
@media (min-width:992px) {
    .desktop {
            display:block !important;
    }
}

//small screen sizes
@media (max-width:991px) {
    .mobile {
            display:block !important;
    }

    .desktop {
            display:none !important;
    }
}

然后我在我的html中应用这个类：

<img class="desktop" src="img/test/test.jpg" 
    alt="jhkjhjk" height="600" width="900">

但是当我收缩浏览器窗口时，图像仍然存在。我错过了什么吗？

Answer 1

由于您使用的是Boostrap，因此您可以更轻松地完成它。

附加一个

类

visible-md

到你的形象。

md适用于＆gt; 992 px。

查看您可以使用的简单课程 http://getbootstrap.com/css/#responsive-utilities

编辑：如果你要做可见的话，可能想看看-md visible-lg。该图表解释了所有组合。