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

等等。