在2020年，是的！

Question

默认情况下，我想给我的身体元素一个绿色边框。在支持视网膜显示的设备上，我想首先检查尺寸。在ipad上我想给我的身体一个红色边框，在iphone上我想给它一个蓝色边框。但是像这样嵌套媒体查询不起作用：

body { border: 1px solid green; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
   @media (max-width: 768px) and (min-width: 320px) {
      body { border: 1px solid red; }
   }
   @media (max-width: 320px) {
      body { border: 1px solid blue; }
   }
}

Answer 1

没有。您需要使用and运算符并将其写为两个查询。但是，您可以在SCSS中执行此操作，它将编译为CSS，但它将通过展开它们并使用and运算符来组合它们。

这是一个常见的问题，一旦我第一次写LESS或SCSS，我就不想回到写这篇长篇大论了。

长手CSS：

@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px) and (min-width: 320px),
                  (min-resolution: 192dpi) and (max-width: 768px) and (min-width: 320px) {
  body {
    border: 1px solid red;
  }
}
@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 320px),
                  (min-resolution: 192dpi) and (max-width: 320px) {
  body {
    border: 1px solid blue;
  }
}

嵌套查询可能有效，但支持因浏览器而异。

Answer 2

在2020年，是的！

实际上，接受的答案已经很长时间了。我什至不确定在发布时它在技术上是否正确。 Firefox从2012年开始支持嵌套，从2013年开始source开始支持Chrome。

您应该现在应该获得所有主要浏览器的支持，当然，通常是IE例外。

您可以使用以下HTML和CSS对其进行测试。只需在浏览器中打开开发面板并更改视口宽度即可。

<div id="abc">Example text</div>

#abc {
  background: green;
}
/* width < 801px */
@media (max-width: 800px) {
  #abc#abc {
    background: red;
  }
  /* 500px < width < 801px */
  @media (min-width: 500px) {
    #abc#abc#abc {
      background: yellow;
    }
  }
}

或者，查看this codepen。

嵌套媒体查询

2 个答案:

在2020年，是的！