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

Question

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

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)）有效，但第二个语句的计算结果不正确。根据 Mozilla：

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

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

@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 横向 (1024x768)。我不希望它在笔记本电脑上显示，但确实希望它在 iPad 上横向显示。

Answer 1

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

我不确定 it 的定义是什么，因为您没有在示例中隐藏任何内容，因此我将参考：

我最终要做的是让用户在平板电脑或手机上处于横向时应用样式。

Orientation on MDM 定义如下：

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

它只是指示视口是处于横向（显示器比它高）还是纵向（显示器比它宽）模式。

您说您的 iPad 横向分辨率为 1024x768，因此要在横向模式下定位 iPad 或手机，您可以设置针对最大宽度为 1024 像素且处于横向模式的所有设备的媒体查询（显示器宽大于高）：

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

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

您可以在this codepen 上查看示例。

如果您的视口宽度大于 1024 像素，则无论如何main 元素将是灰色的。

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

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

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

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>