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

CSS

猴子凯

2020-03-18

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

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

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

第2111篇《CSS媒体查询：最大宽度或最大高度》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
凯Jim 2020.03.18

有两种方法可以在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 */
}
JinJinStafan 2020.03.18

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

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

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android