使用@media 查询隐藏和显示响应式代码

Question

我正在尝试创建一个响应式代码，以便从 iframe 和带有可点击链接的 HTML 5 视频中获得两全其美的效果。在我的设置中，我想编写一个内联 @media 查询，仅在大于 375 像素时播放 Iframe，如果小于 375 像素，则在同一 div 块中播放 HTML 视频item white

我不知道如何显示隐藏而不是显示<video>

我的老板确信这是他想要的方式：S

@media only screen and (min-width: 375px) {
  div.video {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
  }
}

div.video>iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="item white">
  <div class="video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/TIB3q68ZHYw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>


<div class="item white">
  <a href="https://www.walmart.com">
    <video width="100%" height="100%" loop autoplay muted preload="metadata"> . 
    <source src="https://player.vimeo.com/external/274117996.sd.mp4? 
    s=d8982e09554557a0a5db18f8c5d450252fbcddbc&profile_id=165" 
    type="video/mp4" />      
      
    Your browser does not support the video tag. I suggest you upgrade 
    your browser.
    </video>
  </a>
</div>

Answer 1

在 css 中，(min-width:500px) 表示任何高于 500px 的东西都会触发低于它的 css。如果你改为说 (max-width:500px)，这意味着任何低于 499px 的东西都会触发其下的 css。例如：

/* This will effect the class as long as the screen width is > 500px */
@media (min-width:500px) {
  .myContent {
    display:none;
  }
}

/* This will effect the class as long as the screen width is < 500px */
@media (max-width:500px) {
  .myContent {
    display:block;
  }
}

这有点帮助吗？

Answer 2

一种方法是（正如您所指出的）将包含div 的元素组合在一起并分别隐藏/显示内容（尽管此处包含的 div 没有实际意义）。因此，到达每个断点后，iframe 将被隐藏并显示视频（反之亦然）。

我无法播放您的 mp4 文件，因此我用一个示例替换了它，因为这可能会影响您和其他响应者的努力...

简单的 CSS：

 @media only screen and (min-width: 375px) {
   #iframe {
    position: absolute;
    height: 0;
    padding-bottom: 56.25%;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   }
   #video {
    display: none;
   }
 }

 @media only screen and (max-width: 375px) {
   #video {
     display: block;  
   }

   #iframe {
     display: none;
   }
 }

HTML：

 <div class="item white">    
   <div id="iframe">
     <iframe width="100%" height="100%" src="https://www.youtube.com/embed/TIB3q68ZHYw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
   </div>

   <div id="video">
     <video width="100%" height="100%" loop autoplay muted preload="metadata">
     <source src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" 
type="video/mp4" />      

  Your browser does not support the video tag. I suggest you upgrade 
your browser.
     </video>
   </div>
 </div>

您可以在此处找到此代码： http://jsfiddle.net/zh2b0n1e/

您需要调整 CSS 样式元素以满足您的需求（填充、宽度、边框等）并改进 HTML，但这种方法是实现目标的简单方法。