在CSS中将@supports与@media查询混合

Question

我是第一次使用CSS网格构建网站。由于并非所有浏览器都支持此功能，因此我设置了一组后备样式，并有条件地使用@supports not (display:grid)。但我也想将其用作移动样式表，并且仅在较大的屏幕上使用CSS网格-这可以通过简单的媒体查询来实现@media screen and (max-width:700px)。现在的问题是-如果其中任何一个都成立，也就是说，如果浏览器不支持CSS网格或者浏览器窗口的宽度不超过700像素，我想使用我的后备样式表。

所以我的问题是-我怎么问的浏览器@supports或@media在同一时间？嵌套它们是行不通的，因为这本质上是在要求它们都为真，并且仅将整个样式表复制粘贴@supports到中，这是错误的@media。

基本上，我想要这样的东西：

(@supports not (display:grid)) or (@media screen and (max-width:700px)){
    /*my stylesheet*/
}

Answer 1

没有一种方法可以通过OR逻辑将两个不同的条件规则组合为一个规则（如您所述，AND逻辑可以通过嵌套来完成，即使严格地说它们仍然是两个单独的规则）。除非您的管道能够自动为您跨两个独立的条件规则复制CSS，否则您将必须手动执行。

如果可能，请考虑从渐进增强的角度而不是从优雅降级的角度来解决此问题。也就是说，与其将后备样式应用于不支持网格或显示在较小屏幕上的浏览器，而不是将网格样式应用于支持网格并显示在较大屏幕上的浏览器，这就是您提到的嵌套规则的地方感：

@supports (display: grid) {
    /* Or screen and (min-width: 701px),
       or not screen and (max-width: 700px),
       depending on your needs and preferences */
    @media screen and (min-width: 700px) {
        /* Grid styles */
    }
}

如果您不喜欢额外的缩进，可以稍微减少一点，或者根本不缩进；）