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はWebページビューに影響します。どのように私はウェブページをこぼしたのですか？Webページで別のメディアクエリを作成しようとしましたが、機能しませんでした。(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;
    }
}

等々。