Search code examples
csssassmedia-queriesorientation

nesting an orientation break point in a min-width break point


i have nested an orientation break point in a min-width break point (SCSS), like this :

    @media only screen and (min-width : 481px) {
           @media only screen and (orientation: portrait) {
                // something
           }
           @media only screen and (orientation: landscape) {
                // something
           }

    }

my question : what's the width condition referring to ? the portrait or the landscape orientation ? or how does it work in general ?

Solution

  • The media query's width condition always refers to the current orientation's width. So when you are in portrait mode on a smartphone the width will be the shorter side, if you are in landscape mode the width condition will refer to the longer side.