媒体查询正在取代另一种媒体查询

Question

我有几个媒体查询，但一个替换了另一个的 class 属性。例如，当我使用 1024 像素宽度时，它会显示：

@media (min-width: 1024px)
.box:hover .overlay {
  opacity: 1;
  top: -7em !important;
  left: 44%;
}

我还有一个 1366 像素的 class:

@media (min-width: 1366px)
.box:hover .overlay {
  opacity: 1;
  top: -8em !important;
  left: 44%;
}

但是当我在 1366 上时，1024 的 class 仍然有效，取代了 1366 class 样式（因此，它添加了 top: -7em 而不是 top: -8em）。我该如何解决？

Answer 1

如果您希望第一个规则只适用于 1024 到 1366 像素之间，您还可以设置一个最大宽度：

@media (min-width: 1024px) and (max-width: 1365px) {
  .box:hover .overlay {
    opacity: 1;
    top: -7em !important;
    left: 44%;
  }
}

但是，第二个媒体查询使用完全相同的选择器和属性（具有不同的值），因此应该覆盖第一个媒体查询。

这些在您的代码中以什么顺序出现？如果 1024px 规则在您的代码中晚于 1366px 规则出现，它将覆盖 1366px 的规则。在这种情况下，将它们调换。

Answer 2

试试这个：

@media (min-width:1024px) and (max-width: 1365px)
  .box:hover .overlay {
    opacity: 1;
    top: -8em !important;
    left: 44%;
  }  

@media (min-width: 1366px)
.box:hover .overlay {
  opacity: 1;
  top: -8em !important;
  left: 44%;
}

媒体查询正在取代另一种媒体查询

Media queries are replacing another media queries

css

media-queries