带有引导程序的媒体查询不起作用

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 适用于 >992 像素。

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

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