我需要这个条件：
(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))
我在媒体查询中总是只使用宽度，所以我没有复杂查询的经验。这个怎么写？
【问题讨论】：
max-width 在大多数情况下表明您做错了。在设计网页时，您应该首先使用移动设备。然后使用带有min-width 的媒体查询使您的布局更加复杂。如此复杂的媒体查询导致布局难以维护和控制。
标签： css media-queries
多余的括号似乎意味着表达式没有正确解析。我不知道为什么，但这种布局有效：
@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>全屏运行 sn-p 并逐渐减小窗口宽度。
【讨论】：