如何编写符合多逻辑条件的移动端复杂CSS @media媒体查询？

正确写法 #

你可以直接使用以下符合CSS语法规范的媒体查询语句：

@media screen and (min-width: 320px) and (max-width: 800px), 
       screen and (min-width: 801px) and (orientation: portrait) {
  /* 此处写匹配条件下要生效的样式 */
}

原代码失效原因 #

• CSS媒体查询规则中，逗号天然对应逻辑OR的作用，每个逗号分隔的项必须是一个完整的独立查询单元，需要同时包含媒体类型和匹配规则
• 你之前的写法仅在第一个条件前声明了screen and，第二个条件块没有绑定媒体类型，不符合语法要求，因此无法被浏览器识别生效

补充说明 #

如果你不需要限定仅在屏幕设备下生效（比如不需要排除打印等场景），也可以省略screen and，简化为：

@media (min-width: 320px) and (max-width: 800px), 
       (min-width: 801px) and (orientation: portrait) {
  /* 样式代码 */
}

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