Question

轮播中有3个视频，在CSS中，我为屏幕小于600像素的设备写了媒体查询display:none;

@media screen and (max-width: 600px) {
  .video {
overflow: hidden;
  max-width: 100%;
  position: relative;
  vertical-align: top;
  height: 100%;
  width: 100%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
      display: none;

}

是否有可能使拥有600像素以下显示器的人看到图片，休息的人看到视频？

Answer 1

您可以使用（最小）和（最大宽度）获取更多信息，您可以检查MDN：

@media screen and (max-width: 600px)和@media screen and (min-width: 600px)

在此示例中带有display:none隐藏，而block显示。

@media screen and (max-width: 600px) {
  .video {
    overflow: hidden;
    max-width: 100%;
    position: relative;
    vertical-align: top;
    height: 100%;
    width: 100%; 
    /* width: 100%; *//*<< double declaration*/
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: none;
  } /*<< missing closing .video bracket*/
  .pic {
    display: block;
  }
}

@media screen and (min-width: 600px) {
  .video {
    display: block;
  }
  .pic {
    display: none;
  }
}

<img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Picture" height="320" width="480" class="pic">

<video src="https://www.youtube.com/watch?v=dGFSjKuJfrI" class="video" controls>
  Your browser does not support the video tag.
</video>

Answer 2

是的，有可能

是否有可能使拥有600像素以下显示器的人看到图片，休息的人看到视频？

轮播中有3个视频，在CSS中，我编写了媒体查询显示：无；对于屏幕小于600像素的设备

@media screen and (max-width: 600px) {
.video {
display:none;
}
.image{
//add here your css for image
}
}

对于视频

 @media screen and (min-width: 600px) {
.video {
    //add here your css for video
}
.image{
 display:none;

}
}

他们有很多方法可以做到这一点，而以上就是其中之一

如何在CSS中放置图片而不是视频？

2 个答案: