有没有办法在 Internet Explorer 11 上使用嵌套媒体查询？答案

【问题标题】：Is there a way around using nested media queries on Internet Explorer 11?有没有办法在 Internet Explorer 11 上使用嵌套媒体查询？
【发布时间】：2016-01-14 02:54:25
【问题描述】：

我第一次在我创建的响应式网站中使用嵌套媒体查询。例如，这些有助于网站在 12 英寸笔记本电脑和纵向 Ipad 中看起来像我想要的那样，并且它们可以在除 Internet Explorer 11 之外的所有浏览器中正常工作（以及以下）。

检查caniuse 指定IE11 不支持嵌套媒体查询。

这就是 CSS 的样子：

@media all and (max-width: 1024px) {
  @media all and (max-height: 860px) {
    /*Some code*/
  }
  @media all and (min-height: 769px) {
    /*Some Code*/
  }
}

我可以做什么或使用什么才能使这些媒体查询在 IE11 上运行？

【问题讨论】：

标签： css nested media-queries internet-explorer-11

【解决方案1】：

你可以像这样取消它们：

@media all and (max-width: 1024px) and (max-height: 860px) {
  /*Some code*/
}
@media all and (max-width: 1024px) and (min-height: 769px) {
  /*Some Code*/
}

或者你可以考虑使用一个 less 编译器来为你做这件事（以及许多其他功能）。即使更少，您也应该考虑更改您的代码，以使all 不再重复，如下所示：

@media all and (max-width: 1024px) {
  @media (max-height: 860px) {
    /*Some code*/
  }
  @media (min-height: 769px) {
    /*Some Code*/
  }
}

【讨论】：