PHP 变量的媒体查询答案

【问题标题】：Media query for PHP variablesPHP 变量的媒体查询
【发布时间】：2018-11-21 22:16:25
【问题描述】：

我有两个 PHP 变量：

$video_mp4：这是一个视频文件。
$video_poster：这是一张图片。

对于桌面，我希望 $video_mp4 加载为环境视频，它确实如此。但是在max-width: 576px 上，我希望显示$video_poster。

不确定如何处理这个问题。这是我目前的代码和思考过程：

<div class="hero__container--teaser">
  <div class="hero__teaser">
    <!-- By default, show video -->
    <?php echo wp_video_shortcode(  $video_mp4 );  ?>
    <!-- If max-width 576px, show image -->
    <?php echo "<img src='$video_poster'>;" ?>
  </div>
</div>

想知道这里的最佳做法是什么？

【问题讨论】：

标签： php html css media-queries

【解决方案1】：

用.video 包装视频内容和用.image 包装图像内容并在max-width: 576px 中使用CSS Media queries 显示图像并隐藏视频

.hero__teaser .image {
  display: none;
}
@media (max-width: 576px) {
  .hero__teaser .image {
    display: block !important;
  }
  .hero__teaser .video {
    display: none;
  }
}

<div class="hero__container--teaser">
  <div class="hero__teaser">
    <div class="video">
      <?php echo wp_video_shortcode(  $video_mp4 );  ?>
    </div>
    <div class="image">
      <?php echo "<img src='$video_poster'>;" ?>
    </div>
  </div>
</div>

【讨论】：