Question

我正在使用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新手。有没有人有任何想法？

Answer 1

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

def run(self):
    """
    Overrided method.
    """
    # put long running part here
    # ... long running task
    # sprinkle with CallAfter as seen fit
    # ... continue task

    # signal the end result back thread-safely
    wx.CallAfter(self._parent.update_result, result)

删除img { display: inline-block !important; }以使您的媒体查询正常工作。

Answer 2

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

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

Answer 3

正如@VincentOrback所提到的那样，只需从!important选择器中删除img

更好的技术：使用背景图片而只是更改网址，或（甚至更好）使用CSS Sprites

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

3 个答案: