css - 媒体查询相互覆盖

<分区>

我有一个关于媒体查询的一般性问题。我正在处理的网站有两个响应式视口(viewport):

样式标签在css文档中是按照这个顺序写的。因为它们是级联的，所以我的 iPad 查询不断覆盖我的 iPhone 查询(反之亦然)。

有没有简单的解决方法？似乎我遗漏了一些非常明显的东西。

最佳答案

当使用最大宽度媒体查询时，顺序必须从大到小。最小宽度则相反。

这是一个嵌套布局，它应该看起来像这样:

@media (max-width: 770px) {
  .css-rule {
  }
}

@media (max-width: 414px) {
  .css-rule {
  }
}

您还可以尝试为 iPad 尺寸指定一个最小宽度，这将确保其中包含的 css 不会在该宽度以下触发，如下所示:

@media (min-width: 415px) and (max-width:770px) {}

如果您正在加载外部 CSS 文件，它们可能会覆盖您的文件。确保将最重要的文件(通常是自定义 CSS 文件)放在最后一个文件。

检查 these guys出去接受媒体查询，他们通常知道发生了什么。

如果有帮助，请告诉我们!

关于css - 媒体查询相互覆盖，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41620499/