如何为除iPad外的所有符合条件设备应用Media Query

我完全懂你现在的处境——维护一个断点乱七八糟的CSS库，想给符合最小宽度要求的设备加样式，但要排除iPad，还不想把代码复制一遍再重置，这确实挺闹心的。

首先得纠正你之前写法里的逻辑问题：你用了逗号分隔两个条件，这在媒体查询里是**逻辑或（OR）**的意思，所以你的代码会匹配「不是iPad的设备」或者「视口宽度≤823px的设备」，这和你想要的「满足最小宽度条件 且 不是iPad」的逻辑完全相反了。

那怎么实现你要的「&&」逻辑呢？其实媒体查询本身就支持逻辑与（用and连接条件），再结合not来排除iPad的范围就行，完全不需要重复代码重置。

正确的写法示例 #

假设你要给视口宽度≥768px 且 不是iPad的设备应用样式，代码可以这么写：

@media only screen and (min-width: 768px) and not (min-device-width: 768px) and (max-device-width: 1024px) {
  /* 你的样式代码 */
}

逻辑拆解 #

• only screen：限定只匹配屏幕设备（避免给打印机等非屏幕设备应用样式）
• (min-width: 768px)：你的核心最小宽度条件，可根据实际需求调整数值
• not (min-device-width: 768px) and (max-device-width: 1024px)：排除设备宽度在768px到1024px之间的设备（也就是标准iPad的竖屏/横屏尺寸）

这里要注意not的作用范围：它会对后面整个括号里的条件取反，也就是排除同时满足「设备宽≥768px」和「设备宽≤1024px」的设备，正好精准排除iPad。

额外提示 #

如果你的最小宽度条件是min-width: 1025px，那其实iPad的最大设备宽度是1024px，这时候自然就排除了iPad，不需要额外加not条件——但如果你的断点落在iPad的尺寸范围内（比如768px-1024px），就必须用not来做排除。

另外，如果你是基于视口宽度做响应式（而不是设备物理宽度），可以把min-device-width/max-device-width换成min-width/max-width，适配性会更好。

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