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

Question

我正在使用 AngularJS 和 SCSS 编写网站代码。我正处于开发的移动阶段，我很快发现(对于这个元素)我需要一种方法来使用 @media 查询来定位多个断点。所以我通过 this SO answer 找到了和 this 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>

但我一直无法让它工作。最终，我想要做的是当用户在平板电脑或手机上处于横向时应用样式。但是，我不知道我是否做对了，或者是否正确使用了 或 运算符。

显然行不通，嗯，第一个语句(例如:(max-width: 992px))有效，但第二个语句的计算结果不为真。根据 Mozilla 的说法:

Comma-separated lists behave like the logical operator or when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. --- 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 Landscape (1024x768)。我不希望它在笔记本电脑上显示，但确实希望它在横向位置的 iPad 上显示。

Answer 1

However, it doesn't work on iPad Landscape (1024x768). I don't want it to show on Laptops, but do want it to show on iPads in Landscape position.

我不确定你用它定义了什么，因为你没有在你的例子中隐藏任何东西所以我要引用:

What I am trying to do, ultimately, is have styles that are applied when the user is in landscape on a tablet, or phone.

Orientation on MDM定义如下:

This value does not correspond to actual device orientation.

它仅指示视口(viewport)是处于横向(显示器宽度大于高度)还是纵向(显示器高度大于宽度)模式。

您说横向的 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;
  }
}

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

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

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

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

所以关于你的问题，这个例子是一个媒体查询，用于将样式应用于横向模式下使用平板电脑或手机的用户。