如何结合媒体查询针对特定浏览器与屏幕宽度范围应用CSS？

首先明确：纯CSS媒体查询本身没法直接检测浏览器，但我们可以结合**CSS特性查询（@supports）**和媒体查询的逻辑组合，完美实现你要的需求——在特定屏幕宽度范围，且是Firefox或Edge时应用专属样式。

实现思路 #

我们通过三步组合条件：

1. 用媒体查询锁定目标屏幕宽度范围（比如min-width: 768px且max-width: 1200px）
2. 用**@supports特性查询**识别Firefox或Edge（利用各浏览器独有的私有CSS特性）
3. 用CSS逻辑运算符（and、or）把这些条件串联/并联起来

具体代码示例 #

假设我们要在屏幕宽度768px-1200px之间，且是Firefox或Edge时，给.target-element添加特定样式：

/* 写法1：分开针对Firefox和Edge设置 */
/* Firefox + 目标屏幕宽度 */
@media (min-width: 768px) and (max-width: 1200px) {
  @supports (-moz-appearance: none) {
    .target-element {
      background-color: #ffd700;
      padding: 1rem;
      border-radius: 4px;
    }
  }
}

/* Edge（含Chromium版） + 目标屏幕宽度 */
@media (min-width: 768px) and (max-width: 1200px) {
  @supports (-ms-ime-align: auto) {
    .target-element {
      background-color: #ffd700;
      padding: 1rem;
      border-radius: 4px;
    }
  }
}

/* 写法2：更简洁的逻辑合并（二选一即可） */
@media (min-width: 768px) and (max-width: 1200px) {
  /* 满足Firefox或Edge其中一个条件就生效 */
  @supports (-moz-appearance: none) or (-ms-ime-align: auto) {
    .target-element {
      background-color: #ffd700;
      padding: 1rem;
      border-radius: 4px;
    }
  }
}

关键细节说明 #

• Firefox识别依据：-moz-appearance: none是Firefox专属的私有前缀特性，其他主流浏览器不支持，用来区分很靠谱
• Edge识别依据：-ms-ime-align: auto是Edge遗留的私有特性，不管是旧版Edge还是现在的Chromium版Edge都能识别，比通用特性更精准
• 逻辑兼容性：CSS的and/or运算符在现代浏览器中都支持，如果要兼容极旧版本浏览器，推荐用写法1分开设置
• 全程不需要JavaScript，纯CSS实现，轻量且对性能无影响

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