針對智能手機的媒體查詢（橫向）

Question

我正在開發智能手機友好版本的網站，並且在處理智能手機橫向導航媒體查詢時面臨一個小問題。對於縱向，我使用下面的媒體查詢，它的工作完美的罰款：

@media只有屏幕和（最大寬度：320像素）{風格到這裏}

但是當我我正在使用這個媒體查詢的橫向（取自css-tricks.com），我爲橫向寫作的樣式覆蓋了我爲我的網站的桌面版本放置的樣式。

@media只有屏幕和（最小寬度：321px）{風格到這裏}

這只是發生的事情時，我將風格的橫向，這種情況不會發生在我爲縱向定位樣式。

PS我做了測試在iPhone 4

Answer 1

您需要設置一個最大寬度爲您的橫向，這不會覆蓋你的桌面風格，直到寬度大於800像素下：

@media only screen and (min-width : 321px) and (max-width: 800px) { style goes here }

另一種可能是包裝您的桌面風格到另一個查詢和複製它們下方的縱向和橫向的風格：

/* PORTRAIT STYLES */ 
@media only screen and (max-width : 320px) { style goes here } 
/* LANDSCAPE STYLES */ 
@media only screen and (min-width : 321px) { style goes here } 
/* DESKTOP STYLES */ 
@media only screen and (min-width : 800px) { style goes here } 

請注意，橫向樣式將用於桌面版本。有時候這是一個受歡迎的行爲。