CSS @media查询多组逻辑运算符(和/或)

Question

在CSS中，我希望有一些规则，如果页面宽度在600px到750px之间，或者页面宽度超过1200px。

我知道有很多运算符，但我被困在尝试一起使用多个运算符时。这是我到目前为止尝试过的，它适用于 Firefox，但不适用于 Chrome，VS Code 用红色突出显示：

@media ((min-width: 600px) and (max-width: 750px)) or (min-width: 1200px) {

正确的方法是什么？

Answer 1

您可以随时使用Bootstrap Grid系统，从而节省大量时间。还有来自Bootstrap的Flex，在响应能力方面是不费吹灰之力的。你基本上把类 d-flex 放到几乎所有东西上，它会自动调整大小。