Question

我发现的有关嵌套媒体查询的所有主题都已有几年了。

随着CSS3的广泛传播，现在认为嵌套媒体查询在生产中是否可以安全使用？

支持CSS3的浏览器是否完全支持嵌套媒体查询？或者情况并非总是如此？在这种情况下，哪些浏览器不支持嵌套媒体查询？

编辑：

用于说明的嵌套媒体查询示例：

@media screen and (min-width: 1024px) {
   body {
       background-color: blue;
   }

   @media (-webkit-min-device-pixel-ratio: 1.5) {
       body {
           background-color: red;
       }
   }
}

Answer 1

根据CanIUse，是的，您可能很安全...大多数不受支持的浏览器都没有很大的市场份额。但是，如果您的受众使用的是任何版本的IE，它都会崩溃。这意味着美国公司，医疗保健，教育和政府部门将大量退出。

问题在于，我很难找到有利的用例来满足需求。有没有更好的例子说明嵌套查询要容易得多？

给出您的示例代码...（是的，我知道这只是一个示例）

@media screen and (min-width: 1024px) {
   body {
       background-color: blue;
   }

   @media (-webkit-min-device-pixel-ratio: 1.5) {
       body {
           background-color: red;
       }
   }
}

给出的结果与

相同

@media screen and (min-width: 1024px) {
   body {
       background-color: blue;
   }
}

@media screen and (min-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.5) {
       body {
           background-color: red;
       }
   }

第二个版本仅包含更多代码。易于阅读和遵循。可能更容易维护，并且可以在大多数浏览器上使用。

个人而言，“我可以...吗？”这个问题。不如“我应该...？”重要。但是，只有您的具体情况才能决定它是否是一个好主意。

CSS：2016年使用嵌套媒体查询是否安全？

1 个答案: