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>

希望这有帮助！

媒体查询有问题

1 个答案: