一项上的多个媒体查询

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

一项上的多个媒体查询

Multiple media queries on one item

html

css

styles

media-queries