Question

我有一个要求，即CSS规则适用于2个范围，然后是断点之上。例如：我需要背景为绿色，除非宽度为750-800,850-900或900 +。

我尝试了以下但是它似乎不起作用：

.foo { 
    background: green
}

@media all
  and (
    ((min-width: 750px) and (max-width: 800px)),
    ((min-width: 850px) and (max-width: 900px)),
    (min-width: 950px)
  ) {
    .foo {
        background: red;
    }
}

请参阅：http://jsfiddle.net/njt1982/c2a0yuLh/

如果我的浏览器宽度为775px，则符合这两个标准，不是吗？（我是＆＃34;所有＆＃34;我在第一个范围内）。

我想做什么甚至可能？

更新

我找到了以下方法：https://stackoverflow.com/a/33786265/224707 然而，它涉及重复＆＃34; all和＆＃34;部分。有没有办法去＃34; group＆＃34;部分？例如x AND (y OR z)？

Answer 1

按照惯例，我花了很多时间在事情之后才想出来...

.foo { 
    background: green
}

@media all and (min-width: 750px) and (max-width: 800px),
       all and (min-width: 850px) and (max-width: 900px),
       all and (min-width: 950px) {
    .foo {
        background: red;
    }
}

请参阅：http://jsfiddle.net/njt1982/zyjnvjpz/

Answer 2

您的语法不正确。您正在为()规则添加另一组@media。

<强> DEMO

此外，您无需明确说明all，缺少media-type定义隐含为all - docs

div {
    background: green;
}

@media
    (min-width: 650px) and (max-width: 700px),
    (min-width: 750px) and (max-width: 800px),
    (min-width: 850px) {
    
    div {
        background: red;
    }
    
}

<div>div</div>

CSS Media Query多个范围

更新

2 个答案: