我試圖使用媒體查詢來使我的網站響應，而我失敗了。我想知道我是否錯過了一些簡單的東西？

Question

我正在處理的網站有一個背景圖像和一個單獨的標題圖像，我想使用媒體查詢來獲取它們以及標題圖像上的文本，以適當調整不同屏幕的大小。我基於不同的教程玩過很多選項，但我仍然認爲我的樣式表不能正常工作。這裏是我的CSS的例子：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
img {max-width: 90%;} 
    #wrapper { max-width: 90%; } 
    #wrapperbg { max-width: 90%; } 
    #header { max-width: 90%; } 
    #navlist { max-width: 90%; font-size: 80%; font-family: agency, 

sans-serif; } 
    #navlist2 { max-width: 90%; } 
    #navlist li {max-width: 10%; font-size: 1.5em; font-family: sans-serif; } 
} 

我已經包括在頭以及行：

<meta name="viewport" content="initial-scale=1.0, width=device-width"/> 

我是相當新的嘗試使用媒體查詢的響應式設計，所以我知道我在犯一些無知的錯誤。任何幫助將非常感激。謝謝。

Answer 1

我覺得應該是

@media screen and (min-width:768px) and (max-width:1024px) and (orientation : portrait) 
{ 
    //... 
} 

更多看到this。

Answer 2

我在使用wordpress主題進行媒體查詢時遇到了問題，我通過下載手機專用插件和創建樣式表來解決此問題。它只是被稱爲「移動CSS」。我實際上在插件內創建了媒體查詢，例如iPad上的風景和肖像等。