媒体查询互相覆盖

Question

我对媒体查询有一般性问题。我正在处理的网站有两个响应式视口：

• 最大宽度：414像素（iPhone）和
• max-width：770px（iPad）

样式标记在css文档中按顺序编写。因为它们是级联的，我的iPad查询会覆盖我的iPhone查询（反之亦然）。

有一个简单的解决方案吗？似乎我错过了一些非常明显的东西。

Answer 1

使用max width media查询时，顺序必须从最大到最小。对于最小宽度则相反。

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文件）放在LAST文件中。

检查these guys是否有媒体查询，他们通常知道该怎么做。

告诉我们是否有帮助！