是否可以在媒体查询中嵌套媒体查询？ [英] Is it possible to nest media queries within media queries?

问题描述

这可能吗？这似乎是一个整洁的解决方案，但我不知道如果它会工作。

Is this possible? It seems like a neat solution to me, but I'm not sure if it will work.

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

    }

}

推荐答案

您应该能够 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 */

}

这篇关于是否可以在媒体查询中嵌套媒体查询？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！