媒体查询卡住

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 会正确隐藏；但是，当浏览器大小达到 601 像素并降低时，div 仍然保持隐藏状态。我做错了什么？

Answer 1

媒体查询级联。也就是说，在601px，您的@media screen and (max-width: 601px) 媒体查询将正确生效，但@media screen and (max-width: 993px) 媒体查询也会生效，因为601px 小于993px。因此，该元素应用了 both 媒体查询。而且因为您的元素仍然具有“小”宽度的 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（移动优先）或max-width（桌面优先）查询（不要混合使用）。这将进一步解释here。