Question

为什么最后一个媒体查询在这里不起作用？我在看什么吗？我试过改变顺序，但由于某种原因它总是遗漏掉最后一个。这对我来说似乎是正确的级联顺序。

@media screen and (min-width: 768px) {
  .mobileBrand {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .desktopBrand {
    display: none;
  }
}
@media screen and (max-width: 1079px) {
  .nav-right {
    margin-left: 1em;
  }
}
@media screen and (max-width: 1106px) {
  .nav-right {
    margin-left: 6em;
  }
}

Answer 1

如果屏幕小于1079px，上面的场景并没有清楚地告诉浏览器应该留下什么边距 - 它可以是6em或1em。

您应为 1106px 查询定义 min 和 max 值。

@media screen and (min-width: 1080px) and (max-width: 1106px) {

    .nav-right {
        margin-left: 6em;
    }
}

Answer 2

第四个将覆盖第三个，因为第四个也定义了小于1106px的所有内容。所以第三个永远不会适用。

在第四个上使用min-width AND max-width以避免这种情况。

ADDITION / EDIT：或者只是颠倒第三和第四个的顺序......

Answer 3

如果您查看媒体查询：

@media screen and (min-width:1080px) and (max-width:1106px)

您有两个相互冲突的查询。

一个是0px到1079px，另一个是0px到1106px。

它们完全重叠1079px。

我会更明确地定义查询。

陈述

的内容

{{1}}

这样，高于你定义的1079px的任何东西都会显示6em的左边距。

我的上一次媒体查询未被使用

3 个答案: