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

Question

我想要为移动设备隐藏大图片.看看这个网站我把以下样式放在我的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 px.

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

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