为小屏幕编写的@media媒体查询在大屏幕生效，如何阻止？

这个问题我之前调试响应式样式时也踩过坑，核心问题出在你媒体查询里的逗号分隔符上——它代表的是「逻辑或（OR）」的关系，只要满足其中任意一个条件，这段CSS就会生效。

你当前的代码：

@media only screen and (min-width: 320px), (min-width: 360px), (min-width: 375px), (min-width: 600px){ 
  /* some CSS */ 
}

意味着只要屏幕宽度≥320px（现在几乎所有设备，包括大屏显示器都满足这个条件），这段样式就会被应用，这就是大屏幕也会生效的根本原因。

两种修正方案 #

方案一：用max-width限定小屏幕上限

如果你的目标是给宽度≤600px的小屏幕统一写样式，直接用max-width把生效范围锁死在小屏幕区间：

@media only screen and (max-width: 600px) {
  /* 你的小屏幕专属CSS */
}

这样只有屏幕宽度≤600px时才会触发，超过600px的大屏幕完全不会应用这段样式。

方案二：精准限定宽度范围

如果你只想在320px到600px之间的屏幕应用样式，用and结合min-width和max-width，把生效范围框成一个闭合区间：

@media only screen and (min-width: 320px) and (max-width: 600px) {
  /* 你的小屏幕CSS */
}

这样只有宽度落在320px到600px之间的设备才会生效，大屏幕自然就被排除在外了。

额外提示 #

如果确实需要针对320px、360px这类独立小断点写差异化样式，建议分开编写独立的媒体查询，而不是用逗号合并，比如：

/* 320px ≤ 宽度 < 360px */
@media only screen and (min-width: 320px) and (max-width: 359px) {
  /* 对应样式 */
}

/* 360px ≤ 宽度 < 375px */
@media only screen and (min-width: 360px) and (max-width: 374px) {
  /* 对应样式 */
}

不过这种场景其实不多见，大部分时候用方案一或二就能满足需求。

内容的提问来源于stack exchange，提问作者Shoaib Khan Tareen