为什么我的媒体查询会互相“踩踏”？答案

【问题标题】：Why are my media queries "stepping" on each other?为什么我的媒体查询会互相“踩踏”？
【发布时间】：2021-10-25 00:16:23
【问题描述】：

我很难为不同的 iPad 屏幕使用媒体查询。这些是我正在使用的：

iPad Pro 仅在纵向模式下 @media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation : portrait)

iPad 10 仅限纵向模式 @media only screen and (min-width: 810px) and (max-width: 1080px) and (orientation : portrait)

iPad Air 2 仅在纵向模式下 @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation : portrait)

这是我的问题。假设我为 iPad Pro 设置了蓝色背景，为 iPad 10 设置了红色背景。iPad Pro 的背景也将是红色。

如何具体定位每台 iPad？

【问题讨论】：

我不熟悉 iPad 屏幕分辨率，但是您的查询中有很多重叠，所以当多个匹配时您希望会发生什么？
删除max-width 并将它们从最小最小宽度排序到最大怎么样？
@JohnMontgomery 好吧，我需要对每台 iPad 进行调整，这就是为什么我需要分别针对每一台。
@Paula 样式表不知道您在这些查询中使用的 iPad 型号，它只知道宽度和方向。如果你的 iPad 有 1024px 的宽度，它将触发所有三个条件，如果有冲突的样式，它将保留最后一个。如果您需要针对特定模型，则需要找到其他区分它们的方法。
更详细地说，媒体查询只是真正意义上的，因为它们将您的 CSS 规则隔离到一个屏幕尺寸范围内。当存在重叠时，所有适用的媒体查询的所有样式都适用，您最好不要使用媒体查询。我建议采用移动优先的方法，正如Bootstrap 和其他人所展示的那样，使用min- 从最小到最大工作。更好的是，只需使用与屏幕尺寸不紧密耦合的流畅布局即可。

标签： html css media-queries

【解决方案1】：

我认为你很难使用 orientation 删除 orientation 并且一切正常。

检查 sn-p。

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html, body {
    height: 100%;
  }

  body {
    background-color: yellow;
  }

  @media only screen and (min-width: 1024px) and (max-width: 1366px) {
    body {
      background-color: blue;
    }
  }

  @media only screen and (min-width: 810px) and (max-width: 1080px) {
    body {
      background-color: red;
    }
  }

  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    body {
      background-color: pink;
    }
  }

【讨论】：

即使这个答案没有解决我的问题，它确实有帮助。谢谢。

【解决方案2】：

这是因为当屏幕介于 (min-width: 810px) 和 (max-width: 1024px) 之间时，@media 很难应用，因为您的值与 iPad 10 和 iPad Air 2 重叠。因此，它会尝试找出在您使用 ipad10 时应用哪个。
相反，您可以在height/width 中使用软代码，并根据增加宽度或减少宽度来使用，例如：

@media only screen and (min-width: 1080px) and (max-width: 1366px)
@media only screen and (min-width: 1024px) and (max-width: 1080px)
@media only screen and (min-width: min-width: 810px) and (max-width: 1024px)
@media only screen and (min-width: min-width: 768px) and (max-width: 810px)
@media only screen and (max-width: 768px)

【讨论】：

【解决方案3】：

如前所述，您的媒体查询不知道您在哪个设备上，它们只获取宽度和方向。据此，所有三个都以 1024 像素开火。

@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation : portrait)

从 1024 像素开始并包括 1024 像素

@media only screen and (min-width: 810px) and (max-width: 1080px) and (orientation : portrait)

包括 1024 像素

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation : portrait)

结束并包含 1024 像素

第二个和第三个也在 810-1024px 之间触发，第一个和第二个在 1024-1080px 之间触发。我会推荐daad 的方法。 erman999 的方法仍然并行触发。

【讨论】：