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

一个项目上的多个媒体查询

1 个答案: