如何爲480 * 800和480 * 856設備編寫媒體查詢？

Question

我是新來的響應式設計，直到現在我還沒有得到它。我的問題是，我需要針對橫向和縱向模式爲480 * 800和480 * 856設備編寫兩個媒體查詢。請向我解釋它是如何工作的？

我已經嘗試此查詢，似乎兩者在橫向模式下的設備工作

@media只有屏幕和（最小寬度：480像素）和（最大寬度：854px）和（方向：景觀）

Answer 1

@media all and (max-width: 480px) and (min-width: 480px) and (min-height:800px) and (max-height:856px) 
{ 
    body { 
     background-color:lime; 
    } 
} 

釷將使用相同的css代碼來定位兩個設備。

或者，您可以將其拆分爲兩個媒體查詢並定位到每個平臺。

當我是新來的響應式設計我發現這篇文章非常有用：http://css-tricks.com/css-media-queries/

Answer 2

你可以試試下面的CSS樣式：

media screen (max-width: 480px) and (max-height:856px) { 
    //code 
} 

media screen (max-width: 480px) and (max-height:800px) { 
    //code 
} 

media screen and (max-width: 856px) { 
    //code 
} 

media screen and (max-width: 800px){ 
    //code 
}