如何将css媒体查询应用于视频海报？

@media (max-width: 600px) {
  /* 在屏幕宽度小于600像素时应用的样式 */
  .video-poster {
    /* 修改视频海报的样式 */
  }
}

<div class="video-poster"></div>

.video-poster {
  /* 默认的视频海报样式 */
  background-image: url('default-poster.jpg');
  background-size: cover;
  /* 其他样式属性 */
}

@media (max-width: 600px) {
  /* 在屏幕宽度小于600像素时应用的样式 */
  .video-poster {
    background-image: url('mobile-poster.jpg');
    /* 修改视频海报的样式 */
  }
}

@media (min-width: 601px) and (max-width: 1200px) {
  /* 在屏幕宽度在601像素到1200像素之间时应用的样式 */
  .video-poster {
    background-image: url('tablet-poster.jpg');
    /* 修改视频海报的样式 */
  }
}

@media (min-width: 1201px) {
  /* 在屏幕宽度大于1201像素时应用的样式 */
  .video-poster {
    background-image: url('desktop-poster.jpg');
    /* 修改视频海报的样式 */
  }
}