【问题标题】:Media Queries Stuck媒体查询卡住
【发布时间】:2019-03-03 20:45:48
【问题描述】:

我正在尝试利用媒体查询来隐藏或取消隐藏 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 仍然保持隐藏状态。我做错了什么?

【问题讨论】:

    标签: html css media-queries


    【解决方案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
      }
    }
    &lt;div class="hide-medium hide-large"&gt;Test&lt;/div&gt;

    还需要注意的是,同一样式表中的媒体查询是自上而下应用的。如果您有一个对目标元素具有有效规则的“较低”媒体查询,它将覆盖任何“较高”的有效媒体查询。在这方面,您可以使用min-width(移动优先)或max-width(桌面优先)查询(不要混合使用)。这将进一步解释here

    【讨论】:

    • 完美。感谢您的帮助!
    • 我可能很快就回答了。我应该重新发布还是编辑原始问题?
    猜你喜欢
    • 2013-04-12
    • 1970-01-01
    • 1970-01-01
    • 2022-01-25
    • 1970-01-01
    • 2017-02-03
    • 2016-02-10
    • 2021-02-27
    • 2013-01-22
    相关资源
    最近更新 更多