CSS3移动媒体查询

Question

我对网页视图在纵向和横向不同的看法

/* portrait ----------- */ 
    @media only screen 
    and (max-width : 320px) { 
     body{ 
     padding:20px; 
     } 
    } 


    /* landscape----------- */ 
     @media only screen 
    and (min-width : 321px) { 
    body 
     { 
     padding:60px; 
     } 
    } 
    /* webpage----------- */ 
     body 
      { 
      padding:0px; 
      } 

然而，景观CSS效果。如何将网页分散出去？ 我试图在网页上做另一个媒体查询，但它没有奏效。 还我试图(min-device-width : 321px)只有设备，但它不工作

Answer 1

如this article解释，媒体查询指定包括定向检测。它应该看起来像这样：

@media screen and (orientation:landscape) and (min-width:321px) { 
    foo { 
     padding:60px; 
    } 
} 

@media screen and (orientation:portrait) and (max-width:320px) { 
    foo { 
     padding:20px; 
    } 
} 

依此类推。