为什么我的媒体查询 "stepping" 相互影响？

Question

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

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？

Answer 1

我认为您在 orientation 删除 orientation 时遇到了困难，但一切正常。

检查该片段。

* {
    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;
    }
  }

Answer 2

这是因为当屏幕介于 (min-width: 810px) 和 (max-width: 1024px) 之间时 @media 很难应用，因为您的值与 iPad 10 和 [=34 重叠=] 空气 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)

Answer 3

如前所述，您的媒体查询不知道您使用的是哪个设备，它们只知道宽度和方向。据此，所有三个都在 1024px 处触发。

@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)

包括 1024px

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

结束并包含 1024px

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

为什么我的媒体查询 "stepping" 相互影响？

Why are my media queries "stepping" on each other?

html

css

media-queries