是否可以在媒体查询中嵌套媒体查询？

Question

这可能吗？对我来说这似乎是一个很好的解决方案,但我不确定它是否会起作用.

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

    /* Code for both portrait and landscape */

    @media (orientation:portrait) {

        /* Code for just portrait */

    }

    @media (orientation:landscape) {

        /* Code for just landscape */

    }

}

Answer 1

您应该能够在CSS3中以这种方式嵌套@media规则,但大多数浏览器尚不支持它.有关详情,请参阅此答案.

您必须完全扩展并重复顶级媒体查询以获得内部规则,以便跨浏览器工作(我想SCSS处理器会产生类似的东西):

@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 */

}