以逗号分隔的媒体查询列表不起作用

Question

我正在用AngularJS和SCSS编写一个站点。 我处于移动阶段的开发阶段，我很快发现（对于这个项目）我需要一种方法来使用@media查询来定位多个断点。 所以我通过这个SO答案和这个CSS Tricks Post以及SO上的其他多个答案找到了。 然后我将我发现的解决方案实现到测试用例中，请参阅下面的代码片段进行测试。

main {
    background-color: grey;
    height: 100%;
    min-height: 1000px;

    @media (max-width: 992px) {
        background-color: red
    }

    @media (max-width: 768px) {
        background-color: lightcoral
    }

    @media (max-width: 992px), (max-width: 992px) and (orientation: landscape) {
        background-color: lightgreen;
    }

    @media (max-width: 768px),
    (max-width: 768px) and (orientation: landscape) {
        background-color: lightblue;
        // Reset the min-height here, because we no longer have the sticky search bar.
        min-height: 450px;
    }
}

<main>
    <h1>Page Title</h1>
    <h2>Some Descriptive information</h2>

    <div>Content</div>
</main>

但是我无法让它发挥作用。 我最终想做的是，当用户在平板电脑或手机上使用横向时，会应用这些样式。 但是，我不知道我做得对，还是正确使用or运算符。

它显然不起作用，第一个语句（例如： (max-width: 992px) ）有效，但第二个语句不能评估为true。 根据Mozilla的说法：

逗号分隔列表的行为类似于逻辑运算符或在媒体查询中使用时。 使用以逗号分隔的媒体查询列表时，如果任何媒体查询返回true，则会应用样式或样式表。 逗号分隔列表中的每个媒体查询都被视为单个查询，应用于一个媒体查询的任何运算符都不会影响其他查询。 --- Mozilla文档

即使我将代码分成两个独立的媒体查询：

@media (max-width: 992px) {
     background-color: lightgreen;
}
@media (max-width: 992px) and (orientation: landscape) {
     background-color: lightgreen;
}

它仍然无法正常工作。 所以我不知道我是否针对错误的宽度（在横向时）或我做错了什么。 任何其他前端开发人员可以告诉我为什么我的逗号分隔媒体查询不起作用？

编辑：这是本机SCSS代码：

main {
    background-color: $mono-90;
    height: 100%;
    min-height: 1000px;

    @media screen and (max-width: map_get($grid-breakpoints, 'md')) {
        // Reset the min-height here, because we no longer have the sticky search bar.
        min-height: 450px;
    }

    @media
    (max-width: map_get($grid-breakpoints, 'lg')),
    (max-width: map_get($grid-breakpoints, 'lg')) and (orientation: landscape){
        background-color: lightgreen;
    }

    @media
    (max-width: map_get($grid-breakpoints, 'md')),
    (max-width: map_get($grid-breakpoints, 'md')) and (orientation: landscape){
        background-color: lightblue;
    }

    @media
    (max-width: map_get($grid-breakpoints, 'sm')),
    (max-width: map_get($grid-breakpoints, 'sm')) and (orientation: landscape){
        background-color: lightcoral;
    }
}

编辑：根据@Godwin的建议，我将我的@media查询简化为：

main {
    background-color: $mono-90;
    height: 100%;
    min-height: 1000px;

    @media screen and (max-width: map_get($grid-breakpoints, 'md')) {
        // Reset the min-height here, because we no longer have the sticky search bar.
        min-height: 450px;
    }

    @media screen and (max-width: map_get($grid-breakpoints, 'lg')) {
        background-color: lightgreen;
    }

    @media screen and (max-width: map_get($grid-breakpoints, 'md')) {
        background-color: lightblue;
    }

    @media screen and (max-width: map_get($grid-breakpoints, 'sm')) {
        background-color: lightcoral;
    }
}

但是，它不适用于iPad Landscape（1024x768）。 我不希望它显示在笔记本电脑，但不希望它显示在景观位置的iPad。

Answer 1

但是，它不适用于iPad Landscape（1024x768）。 我不希望它在笔记本电脑上显示，但希望它在横向位置的iPad上显示。

我不确定你的定义是什么，因为你没有在你的例子中隐藏任何东西，所以我要提到：

我最终想做的是，当用户在平板电脑或手机上使用横向时，会应用这些样式。

MDM的方向定义如下：

该值与实际设备方向不对应。

它仅指示视口是横向（显示器是否比它高）或纵向（显示器高于宽）模式。

你说你的iPad横向分辨率为1024x768，所以要以横向模式定位iPad或手机，你可以设置一个媒体查询，定位所有最大宽度为1024px且处于横向模式的设备（显示宽度大于它很高）：

main {
  background-color: grey;
  height: 100%;
  min-height: 1000px;
  width: 100%;

  @media screen and (max-width: 1024px) and (orientation: landscape) {
    background-color: lightblue;
  }
}

您可以查看此codepen上的示例。

如果视口的宽度大于1024px，则无论如何， main元素都将为灰色。

如果您调整浏览器窗口的大小以使视口宽度等于或小于1024px，并且在横向上考虑视口（显示宽度大于高），例如横向模式的iPad（1024x768），媒体查询将触发并应用蓝色背景：

如果您将浏览器窗口调整为仍然具有等于或小于1024px但高度大于宽度的视口，则视口不再被视为处于横向模式，而是切换到纵向模式。 此时，媒体查询不再被触发，我们回退到灰色元素：

因此，关于您的问题，该示例是在横向模式下使用平板电脑或手机向用户应用样式的媒体查询。

Answer 2

这是一个解决方案。希望这对你有用

 main { background-color: grey; height: 100%; min-height: 1000px; } @media (max-width: 992px) and (orientation:portrait) { main{ background-color: red } } @media (max-width: 768px) and (orientation:portrait) { main{ background-color: lightcoral } } @media (max-width: 992px) and (orientation: landscape) { main{ background-color: lightgreen; } } @media (max-width: 768px) and (orientation: landscape) { main{ background-color: lightblue; min-height: 450px; } } 

 <main> <h1>Page Title</h1> <h2>Some Descriptive information</h2> <div>Content</div> </main>