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

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

您应该能够使用nest @media rules this way in CSS3，但是大多数浏览器还不支持它。详情请参见this answer。

您必须完全扩展和重复顶级媒体查询，内部规则才能跨浏览器工作(我想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 */

}

Answer 2

如果你想这样做，最好的方法是在链接标签中使用高级媒体查询，然后在链接的工作表中使用其他查询。

然而，在实践中，大多数人将他们的CSS规则从涵盖常见内容的基本表中级联，然后在每个媒体规则集中对其进行更改。

Answer 3

我认为这是不可能的，但你可以写这种格式，如果你正在使用SASS css预处理器。

例如，您可以复制此代码并粘贴到https://www.sassmeister.com/ -and查看输出

SASS

@media only screen and (max-width: 767px) {
  body{
    color:red;
  }
   @media (orientation:portrait) {
       body{
        color:green;
      }
   }
   @media (orientation:landscape) {
       body{
        color:orange;
      }
   }
}

输出CSS

@media only screen and (max-width: 767px) {
  body {
    color: red;
  }
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
  body {
    color: green;
  }
}
@media only screen and (max-width: 767px) and (orientation: landscape) {
  body {
    color: orange;
  }
}