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;
    }
}

等等。