对一个项目进行多个媒体查询(Multiple media queries on one item)

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

让我解释一下，我试图在多种设备上使用视频背景，但效果如此之好，但在移动设备上时，大部分视频都会被截断，而平板电脑则是如此。所以我有3个视频，一个全屏，一个960 x 540和另一个480 x 270.我想设置一个媒体查询，允许我根据屏幕的大小在这些视频之间切换。到目前为止我有：

HTML：

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

我假设有一种比我正在做的更容易的方法 - 因为它不能很好地工作！

谢谢！ ^^

Is it possible to have multiple media queries for one item in code?

Let me explain, I'm trying to have a video background work on multiple devices, so far so good, it works, but when on mobile the majority of the video is cut off, same for tablet. So I have 3 videos, one full screen, one 960 x 540 and another 480 x 270. I want to set up a media query that will allow me to switch between these videos depending on the size of the screen. So far I have:

HTML:

CSS:

I'm assuming there is an easier way to do this than what I am doing - as it doesn't work too well!

Thanks! ^^

最满意答案

你可以简化一下你的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;
  }
}
you can simplify a bit your mediaqueries like this: 
@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;
  }
}

更多推荐