用媒体查询替换图像不起作用答案

【问题标题】：Replace image with media query not working用媒体查询替换图像不起作用
【发布时间】：2016-06-04 10:19:56
【问题描述】：

我正在使用 HTML 模板，并尝试使用媒体查询根据浏览器大小替换网站的徽标。

我正在尝试我在这里找到的技术：@media queries and image swapping

我的 custom.css 文件有这个代码：

.test-mobile-logo{
   display: none;
}

@media only screen and (max-width: 500px){           
    .test-main-logo{
     display: none;
   }

   .test-mobile-logo{
     display: block;
   }
}

我的 html 文件有这个标志代码：

<div class="logo"> 
                <a href="index.html" >
                    <img src="images/logo-dark.png" alt="" class="test-main-logo">
                    <img src="images/logo-main.png" alt="" class="test-mobile-logo">
                </a> 
            </div>

该页面同时显示两个图像。但是当我删除我的 style.css 文件时，图像最终一次显示一个并正确替换。

style.css 文件：http://demos.webicode.com/html/lucian/html/css/style.css

我不确定冲突是什么，我还是 CSS 新手。有人有什么想法吗？

【问题讨论】：

-click- suggestion to test your website

标签： css media-queries

【解决方案1】：

您的 css 中有这种样式会覆盖您的显示样式。

img {
  display: inline-block !important;
}

删除 !important 以使您的媒体查询正常工作。

【讨论】：

@OP 的 !important 子句可能会导致各种意想不到的副作用，除非你有充分的理由，否则应严格避免。
谢谢！我还在学习 CSS，所以帮助很大！也感谢@Bosworth99 的补充评论
确保删除它不会破坏您网站上的其他内容。祝学习顺利！ :)

【解决方案2】：

正如@VincentOrback 提到的，只是从img 选择器中删除!important

更好的技术： 使用 background-image 来代替，只需更改 url，或者 （甚至更好） 使用 CSS Sprites

【讨论】：

【解决方案3】：

我同意@HenrikhKantuni 使用背景图片并在 css 媒体查询中更改背景图片。

否则用户将始终下载 2 张图像，这是一个不必要的 http 请求，用户将请求千字节，尤其是在移动网络上，您希望尽可能减少这种情况。

【讨论】：