css - 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

如本文所述，媒体查询规范包括方向检测。它应该看起来像这样：

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

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

等等。