css - wordpress 媒体查询问题

Question

我有一个不同的标题，我想为不同的屏幕尺寸做。我在获取 @media 时遇到问题查询工作或理解它们。现在我有一个硬编码的口号。对于宽屏幕，我的图像更大。还有一个更小。我无法让小图像在宽屏上消失。

这是我的媒体查询

• @media only screen and ( min-width: 768px ) and ( max-width: 960px )
• @media only screen and ( max-width: 960px )
• @media only screen and ( max-width: 767px )

@media only screen and ( max-width: 479px ) {
#slogan{
display: none !important;
}
#slogan2 {
float: none;
background: url (http://www.wpcreations.net/test/wp-content/uploads/2015/03/mobile_logo.gif) no-repeat !important;
}
}
对于较小的屏幕，我有口号 <div>显示但我认为对于其他宽度它不应该显示但也许。请使用 Firefox 并将屏幕调大和调小以查看问题以及如何隐藏大图像然后显示小图像或相反。

Answer 1

那是因为您将代码隐藏在 min-width: 768 和 max-width: 960 中。默认情况下，slogan div 的显示属性为“block”。由于您只在 768px 和 960px 之间显示“无”，因此在较大的屏幕上它会显示。移动 #slogan { display: none; 所有其他媒体查询之上的代码只是将它作为普通的 CSS 声明，应该修复它。