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

我需要根据设备宽度在我的站点上显示两个不同的徽标。如果设备的屏幕尺寸小于300像素，我需要显示小标志。CSS中的媒体查询按预期工作

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

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

徽标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; 
} 

}

此代码无法按预期工作。即使在屏幕尺寸小于300px的设备上，我仍然可以看到logo.png 在此先感谢

来源

2015-09-28 Amar Ilindra

你能分享演示链接吗？ –

网站已经在这里生活http://www.geekdashboard.com/ –

除了标志，我认为你的手机导航仍然存在问题。悬停的菜单项与活动链接没有正确对齐。 –

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; 
    } 
}

来源

2015-09-28 11:50:55 Dinesh

它工作，从320px和425px更改宽度为424px而不是321px，并完美工作 –

试试这个吗？

@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; 
    } 
}

来源

2015-09-28 10:34:24

不！没有工作 –

不知道，但似乎缓存您的网站启用，并没有改变为“Logo.png”到“徽标small.png”在你的CSS - http://imgur.com/shhDjYa

可能会尝试清理缓存，它会帮助你！

来源

2015-09-28 12:31:17

可能是缓存问题，我清除缓存并尝试此代码，并且工作 @ media only screen and（max-width：424px ）{ .header-image .site-title> a { background：url（images/logo-small.png）no-repeat left！important; 宽度：300px！重要; } } @media只有屏幕和（最小宽度：425px）{ .header图像.site标题>一个{ 背景：网址（图像/ logo.png）不重复左; float：left; min-height：90px; width：425px; } } –

太棒了！请接受答案！干杯:) –

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

回答

相关问题