Question

我有一个滑块，并且有一个视频，我想将图片和视频放在一个地方，然后在设备的宽度大于600像素时为视频写上display:none

有一个html代码：

<video class="player__video" width="506" height="506" muted preload="auto" playsinline poster="[xfvalue_videopathimage]">
         <source src="[xfvalue_videopath]" type="video/mp4">
          Your browser does not support the video tag.
        <div class="player1">
    <img class="player2" src=[xfvalue_videopathimage] width="506" height="506">     
               </div>
                </video>

和CSS：

    .player {
      position: relative;
      text-align: center;
      cursor: pointer;
      width: 100%;
      height: 100%;
    }

    @media (max-width: 767px) {
      .player {
        overflow: hidden;
      }
    }

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

    @media screen and (max-width: 600px){
        .player__video{
            display:none;
        }

    }
    @media (min-width: 768px) {
      .player__video {
        border-radius: 50%;
      }
    }

@media (max-width: 767px) {
  .player__video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    max-height: 100%;
    position: static;
    overflow: hidden;
  }


    .player1
    {
  position: relative;
  text-align: center;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
    @media (max-width: 600px) {
  .player1 {
    overflow: hidden;
  }
}
.player2{
 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;
}
@media screen and (min-width: 600px){
    .player2{
        display:none;
    }
@media (min-width: 768px) {
  .player2 {
    border-radius: 50%;
  }
}
    @media (max-width: 600px) {
  .player2 {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    max-height: 100%;
    position: static;
    overflow: hidden;
  }

Answer 1

您应该将所有媒体查询放在一起，因为您要覆盖/重写同一件事。删除所有以“ @media（最大宽度：600像素）”开头的内容，第一个除外。这样，它将正确设置。

如何将2个div放在同一位置？

1 个答案: