CSS媒体查询：最大宽度或最大高度

有两种方法可以在CSS中编写适当的媒体查询。如果您首先从较大的设备写入媒体查询，则正确的写入方式将是：

@media only screen 
and (min-width : 415px){
    /* Styles */
}

@media only screen 
and (min-width : 769px){
    /* Styles */
}

@media only screen 
and (min-width : 992px){
    /* Styles */
}

但是，如果您首先要为较小的设备编写媒体查询，则可能是这样的：

@media only screen 
and (max-width : 991px){
    /* Styles */
}

@media only screen 
and (max-width : 768px){
    /* Styles */
}

@media only screen 
and (max-width : 414px){
    /* Styles */
}

使用逗号指定两个（或多个）不同的规则：

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

从https://developer.mozilla.org/en/CSS/Media_queries/

...此外，您可以将多个媒体查询组合在一个以逗号分隔的列表中；如果列表中的任何媒体查询为true，则将应用关联的样式表。这等效于逻辑“或”运算。