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

这是因为您将代码隐藏在最小宽度内的较小口号：768 AND max-width：960.默认情况下，口号div将具有“block”的显示属性。由于您只在768像素和960像素之间显示“无”，因此在显示的大屏幕上显示的是“无”。将#slogan { display: none; }代码移动到所有其他媒体查询之上，只需将其作为普通的CSS声明并修复即可。