如何在CSS媒体查询中排除指定宽度范围？

你之前的写法失效是因为CSS的not运算符对括号内的复合媒体条件支持有限，部分浏览器无法正确解析这种嵌套逻辑。更可靠且兼容性更好的方式是直接拆分目标范围：将原本的1000px-1500px拆分为两个不包含1100px-1200px的独立区间，用逗号分隔（等价于逻辑或）来组合媒体查询。

推荐写法 #

@media screen and (min-width: 1000px) and (max-width: 1099px),
       screen and (min-width: 1200px) and (max-width: 1500px) {
  /* 在此处编写你的样式规则 */
}

这个写法直接覆盖了两个有效区间：

• 1000px ≤ 视口宽度 ≤ 1099px
• 1200px ≤ 视口宽度 ≤ 1500px
  完全避开了1100px-1200px的范围，逻辑清晰且所有现代浏览器都能支持。

不推荐的not替代写法 #

如果坚持使用not运算符，需要拆分复合条件，但这种写法冗余且兼容性较差：

@media screen and (min-width: 1000px) and (max-width: 1500px) and not (min-width: 1100px),
       screen and (min-width: 1000px) and (max-width: 1500px) and not (max-width: 1200px) {
  /* 样式规则 */
}

本质上和拆分区间的逻辑一致，但代码更繁琐，不如直接拆分区间的写法直观。

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