嵌套媒体查询

嵌套媒体查询

否。您需要使用

and

运算符并将其写为两个查询。但是，您可以在将编译为CSS的SCSS中执行此 *** 作，但是它将通过展开它们并使用

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

嵌套查询可能有效，但是支持在不同的浏览器中有所不同。