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聲明並修復即可。