您应该能够 nest @media 在CSS3中以这种方式，但尚未支持由大多数浏览器。有关详情，请参见此答案。

You should be able to nest @media rules this way in CSS3, but it isn't yet supported by most browsers. See this answer for details.

您必须完全展开和重复顶层媒体查询的内部规则，使其在浏览器中工作（我想SCSS处理器会产生类似的东西）：

You would have to fully expand and repeat the top-level media queries for the inner rules for it to work across browsers (and I imagine the SCSS processor would generate something similar):

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) {
    /* Code for both portrait and landscape */
}

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) 
and (orientation: portrait) {

    /* Code for just portrait */

}

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) 
and (orientation: landscape) {

    /* Code for just landscape */

}