在最小宽度断点中嵌套方向断点

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


我在最小宽度断点 (SCSS) 中嵌套了一个方向断点,如下所示:

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

    }

我的问题:宽度条件指的是什么?纵向还是横向?或者它一般是如何工作的?

媒体查询的宽度条件总是指当前方向的宽度。因此,当您在智能手机上处于纵向模式时,宽度将是较短的一侧,如果您处于横向模式,则宽度条件将指的是较长的一侧。