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

这可能吗？对我来说，这似乎是一个巧妙的解决方案，但我不确定它是否有效

@仅媒体屏幕
和（最小设备宽度：320px）
和（最大设备宽度：480px）{
/*纵向和横向的代码*/
@媒体（方向：纵向）{
/*只是肖像的代码*/
}
@媒体（方向：景观）{
/*正义风景的代码*/
}
}

您应该能够，但大多数浏览器还不支持它。有关详细信息，请参阅

您必须完全展开并重复顶级媒体查询，以获得跨浏览器工作的内部规则（我认为SCSS处理器将生成类似的结果）：

---

如果要执行此操作，最好的方法是在链接标记中使用高级媒体查询，然后在链接工作表中使用其他查询

---

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

我认为这是不可能的，但如果您使用的是SASS CSS预处理器，则可以编写此格式

例如，您可以复制此代码并粘贴到-并查看输出

SASS

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

@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;
  }
}

输出CSS

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

@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;
  }
}

---

我喜欢这个想法，因为它在技术上是隐含嵌套的。在写这篇评论时，@Qasim：这里的链接指向一个更为更新的链接，表示现在所有浏览器都支持嵌套；这个答案现在已经过时了。