Question

我正在尝试利用媒体查询来隐藏或取消隐藏HTML中的div：

<div class="hide-medium hide-large">Test</div>

使用以下CSS：

@media screen and (min-width: 994px){
    .hide-large{
        display:none
    }
}
@media screen and (max-width: 993px){
    .hide-medium{
        display:none
    }
}
@media screen and (max-width: 601px){
    .hide-small{
        display:none
    }
}

当相应调整浏览器的大小时，div会正确隐藏；但是，当浏览器尺寸达到601px或更低时，div仍然保持隐藏状态。我在做什么错？

Answer 1

媒体查询级联。也就是说，在601px，您的@media screen and (max-width: 601px)媒体查询将正确生效，但是@media screen and (max-width: 993px)媒体查询将也生效，就像{{1} }小于601px。因此，该元素已应用两者媒体查询。而且，由于您的元素仍然具有993px类，且宽度较小，因此它仍将被隐藏。

如果您不希望这种情况发生，我建议您也在中间媒体查询中明确设置一个hide-medium：

min-width

@media screen and (min-width: 994px) {
  .hide-large {
    display: none
  }
}

@media screen and (max-width: 993px) and (min-width: 602px) {
  .hide-medium {
    display: none
  }
}

@media screen and (max-width: 601px) {
  .hide-small {
    display: none
  }
}

同样重要的是要注意，同一样式表中的媒体查询是从上到下应用的。如果您的“低层”媒体查询具有针对目标元素的有效规则，它将覆盖“上层”的所有有效媒体查询。在这方面，您可以仅使用 <div class="hide-medium hide-large">Test</div>（移动优先）或min-width（台式优先）查询（无需混合使用）。 here 。

媒体查询卡住了

1 个答案: