Question

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

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

我还有另一个1366px的课程：

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

但是当我在1366年时，1024的类仍处于活动状态，取代了1366类样式（因此，它添加顶部：-7em而不是顶部：-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%;
}

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

2 个答案: