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

Posted 2023-03-06

【中文标题】带有引导程序的媒体查询不起作用

【英文标题】：media queries with bootstrap not working

【发布时间】：2015-01-04 19:11:48

【问题描述】：

我想为移动设备隐藏大图片。看着 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" 
      >

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

【参考方案1】：

由于您使用的是 Boostrap，因此您可以更轻松地进行操作。

追加一个类

visible-md

你的形象。

md 适用于 >992 像素。

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

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

【讨论】：

太棒了，那就更好了，我就这么做。仍然为什么我的媒体查询不起作用？

我不是最擅长媒体查询，但您可能需要指定媒体类型“@media screen”