媒体查询相互覆盖

Question

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

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

有一个简单的解决方案吗？好像我缺少真正明显的东西。

Answer 1

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

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

@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文件。

检查这些人是否有媒体查询，他们通常知道最新情况。

让我们知道是否有帮助！