CSS 媒体查询 : max-width OR max-height

Question

在编写 CSS 媒体查询时，有什么方法可以用“或”逻辑指定多个条件吗？

我正在尝试做这样的事情:

/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
  ...
}

Answer 1

使用逗号指定两个(或多个)不同的规则:

@media screen and (max-width: 995px), 
       screen and (max-height: 700px) {
  ...
}

来自 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others. Thus, if any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like a logical or operator.