html - 媒体查询有问题

Question

我现在设置了我的代码，其中一个 div 从 0-992 像素的浏览器宽度可见，另一个 div 从 993-infinity 浏览器宽度可见，当一个 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;
        }
    }

Answer 1

您的 CSS 值和 !important 之间需要空格声明。
dispaly:none!important应该是 display: none !important .

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

至于像素范围，你的max-width 上升到992 , 另一个开始于 993 .对于一个像素，这将重叠。只需将它们设置为使用相同的值即可避免这种情况。我去了992在我的示例中。

@media (max-width: 992px) {
  .video-responsive {
    display: none;
  }
}

@media (min-width: 992px) {
  .mobileVideo {
    display: none;
  }
}

<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>

希望这对您有所帮助!