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

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):)起作用,但第二个语句不评估为真.根据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 横向 (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无论如何该元素都将是灰色的。

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

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

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