CSS媒体查询：max-width或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

逗号用于将多个媒体查询组合到单个规则中。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为true，则整个media语句将返回true。换句话说，列表的行为就像一个逻辑或运算符。