CSS中的媒体查询未按预期工作答案

【问题标题】：Media Query in CSS Not working as expectedCSS中的媒体查询未按预期工作
【发布时间】：2015-12-25 13:29:57
【问题描述】：

我需要根据设备宽度在我的网站上显示两个不同的徽标。如果设备的屏幕尺寸小于或等于 300px，我需要显示小 logo。

网站：http://www.geekdashboard.com/

Logo.png -> http://www.geekdashboard.com/wp-content/themes/geekdashboard/images/logo.png

logo-small.png -> http://www.geekdashboard.com/wp-content/themes/geekdashboard/images/logo-small.png

CSS：

.header-image .site-title > a {
    background: url(images/logo.png) no-repeat left;
    float: left;
    min-height: 90px;
    width: 425px;
}

小宽度设备的CSS如下

  @media only screen and (max-width: 320px) {

.header-image .site-title > a {
    background: url(images/logo-small.png) no-repeat left!important;
    width: 300px!important;
}

}

此代码对我来说没有按预期工作。即使在屏幕尺寸小于 300 像素的设备上，我仍然可以看到 logo.png 提前致谢

【问题讨论】：

可以分享演示链接吗？
网站已在此处上线geekdashboard.com
除了标志之外，我认为您的移动导航仍然存在问题。悬停的菜单项未与活动链接正确对齐。
我刚刚检查了你的 CSS，它不包含上述的媒体查询？
元标签在css下面，所以我认为把元标签放在css上面。

标签： html wordpress css media-queries

【解决方案1】：

试试这个？

@media (max-width: 320px) {
    .header-image .site-title > a {
     background: url(images/logo-small.png) no-repeat left !important;
     width: 300px !important;
     }
}
@media (min-width: 321px) and (max-width: 480px) {

    .header-image .site-title > a {
    background: url(images/logo.png) no-repeat left;
    float: left;
    min-height: 90px;
    width: 425px;
    }
}

【讨论】：

【解决方案2】：

Specifying the media type should work fine.

@media only screen and (max-width: 320px) {
    .header-image .site-title > a {
     background: url(images/logo-small.png) no-repeat left !important;
     width: 300px !important;
     }
}

@media only screen and (min-width: 321px) {
    .header-image .site-title > a {
    background: url(images/logo.png) no-repeat left;
    float: left;
    min-height: 90px;
    width: 425px;
    }
}

【讨论】：

它成功了，将宽度从 320px 和 425px 更改为 424px 代替 321px 并且完美地工作

【解决方案3】：

不确定，但您的网站上似乎启用了缓存，并且它没有在您的 CSS 中将“logo.png”更改为“logo-small.png” - http://imgur.com/shhDjYa

不妨试试清除缓存，对你有帮助！

【讨论】：

可能是缓存问题，我清除了缓存并尝试了此代码并在@media only screen and (max-width: 424px) { .header-image .site-title > a { background: url( images/logo-small.png) 不再重复！重要；宽度：300 像素！重要； } } @media only screen and (min-width: 425px) { .header-image .site-title > a { background: url(images/logo.png) no-repeat left;向左飘浮;最小高度：90px；宽度：425px； } }