CSS

Question

我需要这个条件：

(min-width:320px AND max-width:800px) OR (min-width:801px AND orientation:portrait)

试过像这样使用括号，但不起作用：

@media screen and ((min-width:320px) and (max-width:800px)), ((min-width:801px) and (orientation:portrait))

我在媒体查询中总是只使用宽度，所以我没有处理复杂查询的经验。我怎么写这个？

Answer 1

过多的括号似乎意味着表达式没有被正确解析。我不知道为什么，但这种布局有效：

@media screen and (min-width:320px) and (max-width:800px), screen and (min-width:801px) and (orientation:portrait)

body {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

@media screen and (min-width:320px) and (max-width:800px),
screen and (min-width:801px) and (orientation:portrait) {
  body {
    background-color: blue;
  }
}

<body></body>

运行全屏显示代码段并逐渐减小 window 宽度。

CSS - 针对移动设备的复杂@media 查询

CSS - complex @media query for mobile devices

media-queries