组合媒体查询问题：宽≤600px且高≤400px时背景蓝设置失效

我来帮你逐个拆解这四个写法的问题，再给你靠谱的实现思路：

• 写法1：@media only screen and (max-width: 600px) and (max-height: 400px)
  这个写法本身完全符合CSS语法规范，你说它没效果大概率是细节没做到位：

  • 是不是忘记给媒体查询加花括号包裹样式内容了？必须写成@media ... { body { background: blue; } }才会生效
  • 有没有其他优先级更高的样式覆盖了背景色？比如全局的body样式写在媒体查询后面，就会把媒体查询的样式冲掉
  • 测试时的视口是不是真的同时满足「宽度≤600px 且 高度≤400px」？比如有些浏览器开发者工具的视口设置可能有偏差，建议手动拖拽浏览器窗口到符合条件的尺寸再验证

• 写法2：@media only screen and (max-width: 600px) and only screen (max-height: 400px)
  这是明显的语法错误，only screen是媒体类型前缀，只需要写一次就够了，多个媒体特性之间用and连接即可，不需要重复加only screen。浏览器识别不了这种错误写法，自然不会触发任何样式。

• 写法3：@media only screen and (max-width: 600px and max-height: 400px)
  同样是语法错误，CSS媒体查询要求每个媒体特性都必须单独用括号包裹，不能把两个特性塞进同一个括号里。这种写法会被浏览器判定为无效，当然不会有效果。

• 写法4：@media only screen and (max-width: 600px), (max-height: 400px)
  这里的逗号代表「或」的逻辑，只要满足「宽度≤600px」或者「高度≤400px」其中一个条件就会触发，所以它不符合你需要的「同时满足两个条件」的需求，这也是为什么它会在不符合预期的场景下让背景变蓝。

正确的实现代码 #

按照标准语法写，同时注意样式优先级和测试场景：

/* 全局默认背景，方便对比效果 */
body {
  background-color: #ffffff;
}

/* 同时满足宽高条件时触发的样式 */
@media only screen and (max-width: 600px) and (max-height: 400px) {
  body {
    background-color: blue;
  }
}

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