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

Question

在旋转木马上有3个视频，在CSS中我为屏幕小于600px的设备写了媒体查询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;

}

是否有可能使显示器少于600px的人看到图片，其余人看到了视频？

Answer 1

您可以使用（min）和（max-width）获取更多信息，您可以查看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

是的，它是可能的，

是否有可能使显示器少于600px的人看到图片，其余人看到了视频？

在转盘中有3个视频，在CSS中我写过媒体查询显示：无;对于屏幕小于600px的设备

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

}
}

他们有很多方法可以做这件事，上面就是其中之一