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

Question

我在最小宽度的断点（SCSS）中嵌套了一个方向断点，如下所示：

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

    }

我的问题：宽度条件指的是什么？纵向还是横向？或一般如何运作？

Answer 1

媒体查询的宽度条件始终引用当前方向的宽度。因此，当您在智能手机上处于纵向模式时，宽度将是较短的一面；如果在横向模式下，则宽度条件将是指较长的一面。