我想为不同的屏幕尺寸做一个不同的标题。我无法让@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并使屏幕越来越大以查看问题，如何隐藏大图像，然后显示其他方式。
答案 0 :(得分：0)
那是因为你把代码隐藏在最小宽度内的较小标语：768 AND max-width：960。默认情况下，标语div的显示属性为“block”。由于您只在768px和960px之间显示“无”，因此在较大的屏幕上显示。将#slogan { display: none; }代码移到所有其他媒体查询之上，只需将其作为普通的CSS声明进行操作即可修复。