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>

但我还没有能够让它发挥作用。我最终想做的是，当用户在平板电脑或手机上使用横向时，会应用这些样式。但是，我不知道我做得对，还是正确使用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 Landscape（1024x768）。我不想希望它在笔记本电脑上显示，但做希望它在横向位置的iPad上显示。

Answer 1

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

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

我最终想要做的是，当用户在平板电脑或手机上使用风景时，会应用这些风格。

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上的示例。

如果您的视口宽度大于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>

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

2 个答案: