如何在CSS中结合@supports与@media实现或逻辑查询？

嘿，这个需求我之前做响应式布局时也碰到过！CSS确实没有直接提供or语法来组合@supports和@media查询，但我们可以换个反向思考的方式来实现，既避免代码重复，又能完美满足你的需求。

核心思路：反向排除 #

你的需求是「只要浏览器不支持Grid，或者屏幕≤700px，就用回退样式」，反过来理解就是「只有当浏览器支持Grid 且 屏幕宽度>700px时，才启用Grid布局」。而CSS的嵌套查询刚好支持这种「且」逻辑，所以我们可以：

1. 先把回退样式设为默认样式（所有场景都会加载）
2. 然后在「支持Grid + 大屏」的条件下，用Grid样式覆盖回退样式

代码示例 #

/* 第一步：默认应用回退样式（适配不支持Grid的浏览器，以及小屏设备） */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  /* 其他回退布局相关样式 */
}

/* 第二步：仅在「支持Grid 且 屏幕宽度>700px」时，启用Grid布局 */
@supports (display: grid) {
  @media screen and (min-width: 701px) {
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      /* 其他Grid专属样式 */
    }
  }
}

为什么这种方法更好？ #

• 无代码重复：不用把回退样式写两遍，只需要在特定条件下覆盖即可
• 逻辑清晰：反向的「且」逻辑刚好契合CSS原生的嵌套查询规则，可读性强
• 层叠规则友好：CSS的层叠顺序会让后面的Grid样式自动覆盖默认的回退样式，不需要额外加权重

如果实在不想把回退样式设为默认，也可以直接分开写两个查询块，但这样会导致回退样式代码重复，不太推荐：

/* 不支持Grid时应用回退 */
@supports not (display: grid) {
  .container {
    /* 回退样式 */
  }
}

/* 小屏设备应用回退 */
@media screen and (max-width: 700px) {
  .container {
    /* 重复的回退样式 */
  }
}

内容的提问来源于stack exchange，提问作者user3546284