提问者:小点点

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


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

我正在尝试这样做:

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

共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。换句话说,列表的行为就像一个逻辑或运算符。