Safari浏览器CSS媒体查询OR组合失效，规则未触发求助

你遇到的问题根源是错误使用了OR关键字——CSS媒体查询的语法里根本没有OR这个写法，所有符合标准的浏览器（包括Safari）都无法识别这个语法，自然不会触发里面的样式规则。

CSS中实现“或”逻辑的媒体查询，正确方式是用逗号分隔多个媒体条件：

错误写法（无法生效） #

@media(max-width:1280px) OR (max-height:1080px) {
  /* 规则不会被触发 */
}

正确写法（全浏览器兼容） #

@media (max-width: 1280px), (max-height: 1080px) {
  /* 宽度≤1280px 或 高度≤1080px时，规则生效 */
}

你拆分两个独立媒体查询的方式能生效，是因为这种写法和用逗号连接的逻辑完全等价——两种方式都会在满足任意一个条件时应用样式。

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