Question

由于视频背景通常不会在手持设备上自动播放，因此我想删除视频并根据屏幕尺寸将其替换为bg图像。

实现这一目标的最佳方法是什么？是否可以处理媒体查询？：）

Answer 1

您实际上可以将图像设置为HTML上的视频标记，因此如果视频不受支持，则会显示图像。例如，这通常是在移动设备上加载图像时最简单的方法，而不是为移动设备设置单独的网页。您可以在此处详细了解如何执行此操作： http://www.html5rocks.com/en/tutorials/video/basics/

Answer 2

最佳方法IMO将检测用户是使用其用户代理来自移动设备还是标准设备，然后在标准设备上显示视频背景，并在移动设备上显示背景图像。

根据您为网站使用的语言，使用用户代理检测移动设备相对简单。

Answer 3

为了根据用户正在观看您网站的设备执行不同的代码，我建议您使用@media queries。

定位智能手机：

并非所有智能手机都具有相同的尺寸，但作为一般的经验法则使用：

@media screen and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3) {
    .imageelement {
        /* Your css code*/
        display: block !important;
    }
    .videoelement {
        /* Your css code*/
        display: none !important;
    }

}

定位平板电脑：

定位平板电脑时，您应将尺寸保持在此范围内：

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .imageelement {
        /* Your css code*/
        display: block !important;
    }
    .videoelement {
        /* Your css code*/
        display: none !important;
    }
}

定位笔记本电脑和大型设备：

最后，您可以在此处显示视频。

@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .imageelement {
        /* Your css code*/
        display: none !important;
    }
    .videoelement {
        /* Your css code*/
        display: block !important;
    }

}

如果您想详细了解@media queries访问this page。

使用媒体查询删除/交换html内容？

3 个答案: