Html 媒体查询有问题吗

Html 媒体查询有问题吗,html,css,media-queries,Html,Css,Media Queries,我现在已经设置了代码,其中一个div在0-992像素浏览器宽度范围内可见,另一个div在993无限浏览器宽度范围内可见,当一个div可见时,另一个div隐藏。div是代码中的视频。我的问题是,为什么.mobileVideo类仍然显示992像素?这只是一个像素范围被打破了,无法找到一个绕过它的方法。我希望我解释清楚这一点,如果没有请问什么澄清更多。这是我的html和媒体查询 <section class="promoVid"> <div class="container"&g

我现在已经设置了代码,其中一个div在0-992像素浏览器宽度范围内可见,另一个div在993无限浏览器宽度范围内可见,当一个div可见时,另一个div隐藏。div是代码中的视频。我的问题是,为什么.mobileVideo类仍然显示992像素?这只是一个像素范围被打破了,无法找到一个绕过它的方法。我希望我解释清楚这一点,如果没有请问什么澄清更多。这是我的html和媒体查询

<section class="promoVid">
  <div class="container">
      <div class="row text-center">
          <div class="col-md-4">
            <h2>What We Have to Offer</h2>
            <div>
                <span class="decoration_line"></span>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel massa iaculis, posuere augue et, pharetra ipsum. Suspendisse metus ex, pellentesque id dolor in, vehicula varius tortor. Nam auctor ante nisi.</p>
                <div class="col-sm-10 col-sm-offset-1">
                    <a class="btn defaultBtn btn-block" href="/services">Services</a>
                </div>
          </div>                       
          <div class="video-responsive"><!--hidden-xs hidden-sm-->
                <iframe width="560" height="315" src="https://www.youtube.com/embed/NmeFmmoqzR4?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
          </div>
      </div>
  </div>
</section>

<section class="mobileVideo"> <!--visible-sm visible-xs-->
    <div class="container">
        <div class="videoWrapper">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/NmeFmmoqzR4?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>
</section>


 @media (max-width: 992px) {
        .video-responsive {
            display: none!important;
        }
    }
    @media (min-width: 993px) {
        .mobileVideo {
            display: none!important;
        }
    }

您需要在CSS值和之间留空格!重要宣言。 迪帕利:没有!重要信息应显示:无!重要的

话虽如此,你真的应该用!重要的声明,因为它们提供了最大级别的。如有必要,尝试添加更具体的规则,不过请注意,在您的示例中,一个简单的显示:none就足够了

至于像素范围,最大宽度增加到992,另一个从993开始。对于一个像素,这将重叠。只需将它们设置为使用相同的值即可避免这种情况。在我的例子中,我使用了992

@介质最大宽度:992px{ .视频响应{ 显示:无; } } @媒体最小宽度:992px{ mobileVideo先生{ 显示:无; } } 我们所能提供的 Lorem ipsum dolor sit amet,是一位杰出的献身者。埃尼安·维尔·马萨·亚库利斯、波苏尔·奥古斯等人、法雷特拉·伊普苏姆。本品为本品,本品为本品,本品为本品。Nam auctor ante nisi


不是这样,没有空格的查询仍然有效,只是一个像素范围被破坏了。对不起,一开始没有捕捉到。您只需将它们设置为使用相同的值:有人知道解决方案吗?