相互覆盖的媒体查询[重复]

Question

我有一个关于媒体查询的一般性问题。我正在开发的网站有两个响应式视口：

• 最大宽度：414 像素（iPhone）和
• 最大宽度：770px (iPad)

样式标签以该顺序写入 css 文档中。因为它们是级联的，所以我的 iPad 查询一直覆盖我的 iPhone 查询（反之亦然）。

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

Answer 1

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

You'll find a detailed explanation of this here.

这是一个嵌套布局，应该是这样的：

@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 的媒体查询，他们通常知道发生了什么。

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