如何解决Chrome与Firefox的@media (min-width)和(max-width)兼容问题

安全阿岳

2026-5-15

解决Chrome与Firefox媒体查询兼容性问题

这个问题其实是不同浏览器对CSS媒体查询语法解析的细微差异（或更可能是缓存、CSS优先级冲突）导致的，别着急，我们可以通过以下几种方案搞定：

方案1：使用标准规范的媒体查询写法（推荐）

标准CSS媒体查询并不需要嵌套额外的括号，你最初的写法本身是符合规范的，Firefox不生效大概率是缓存或者其他CSS规则冲突导致的。试试给媒体查询加上明确的screen媒体类型，同时强制刷新浏览器缓存：

@media screen and (min-width: 769px) and (max-width: 991px) {
  .img-circle {
    width: 50%;
    /* 可以临时加上 !important 测试是否是优先级问题，确认后建议移除 */
    /* width: 50% !important; */
  }
}

配套操作：

在Firefox中按Ctrl + Shift + R强制刷新页面，清除缓存
如果还是不生效，临时给width属性加上!important，验证是否是其他CSS选择器优先级更高覆盖了这个规则

方案2：拆分媒体查询逻辑（兼容极端场景）

如果上述方法仍有问题，可以尝试用CSS变量拆分条件的方式兜底，这种写法能避免浏览器对and连接条件的解析差异：

/* 先定义基础变量 */
:root {
  --img-circle-width: auto;
}

/* 针对最小宽度设置变量 */
@media screen and (min-width: 769px) {
  :root {
    --img-circle-width: 50%;
  }
}

/* 针对最大宽度限制变量生效范围 */
@media screen and (max-width: 991px) {
  :root {
    --img-circle-width: 50%;
  }
}

/* 应用变量到目标元素 */
.img-circle {
  width: var(--img-circle-width);
}