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

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

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