How should `orientation` conditions be placed for

2019-03-05 22:39发布

问题:

Closely related to the question I asked about using height conditions in media queries and to the CSS-tricks media-queries list, I noticed that each handheld device first group of queries does not have the orientation conditions. So I was wondering, since ordering issues may occur:

  • are always the 3 queries necessary (no orientation, portrait and landscape)?
  • should the queries' width and height values be switched? I.e. should I have instead:

    /* ----------- Galaxy S6 ----------- */
    /* Portrait */
    @media screen and (width: 360px) and (height: 640px) 
      and (-webkit-pixel-ratio: 4) 
      and (orientation: portrait) {...}
    /* Landscape */ @media screen and (width: 640px) and (height: 360px) and (-webkit-pixel-ratio: 4) and (orientation: landscape) {...}

    Where, for example, the width value in portrait goes to height in landscape?