对一个项目进行多个媒体查询

Question

是否可以对代码中的一个项目进行多个媒体查询？

让我解释一下，我正在尝试在多个设备上使用视频背景，到目前为止一切顺利，它可以工作，但是在移动设备上时，大部分视频都被切断了，平板电脑也是如此。所以我有 3 个视频，一个全屏，一个 960 x 540，另一个 480 x 270。我想设置一个媒体查询，允许我根据屏幕大小在这些视频之间切换。到目前为止，我有：

.HTML：

        <video autoplay="autoplay" loop="loop" class="bgvideo">
              <source src="videos/videohd.mp4" type="video/mp4">
        </video>
        <video autoplay="autoplay" loop="loop" class="bgvideo-2">
              <source src="videos/video960x540.mp4" type="video/mp4">
        </video>
        <video autoplay="autoplay" loop="loop" class="bgvideo-3">
              <source src="videos/video480x270.mp4" type="video/mp4">
        </video>

.CSS：

@media (max-width: 960px) {
  .bgvideo {
    display: none;
  }
}
@media (min-width: 960px) {
  .bgvideo {
    display: block;
  }  
}
@media (max-width: 960px) {
  .bgvideo-2 {
    display: block;
  }
}
@media (min-width: 960px) {
  .bgvideo-2 {
    display: none;
  }  
}
@media (max-width: 480px) {
  .bgvideo-2 {
    display: none;
  }
}
@media (min-width: 480px) {
  .bgvideo-2 {
    display: block;
  }  
}
@media (max-width: 480px) {
  .bgvideo-3 {
    display: block;
  }
}
@media (min-width: 480px) {
  .bgvideo-3 {
    display: none;
  }  
}

我

假设有一种比我正在做的更简单的方法 - 因为它效果不太好！

谢谢！^^

Answer 1

你可以像这样简化你的mediaqueries：

@media (min-width: 480px) {
  .bgvideo-2 {
    display: block;
  }
  .bgvideo-3 {
    display: none;
  }
}
@media (min-width: 960px) {
  .bgvideo {
    display: block;
  }
  .bgvideo-2 {
    display: none;
  }
}
@media (max-width: 960px) {
  .bgvideo {
    display: none;
  }
  .bgvideo-2 {
    display: block;
  }
}
@media (max-width: 480px) {
  .bgvideo-2 {
    display: none;
  }
  .bgvideo-3 {
    display: block;
  }
}