Question

发布了类似的问题，但那里的答案对我没有帮助。

我有一个响应式网站，其中整个背景是mp4格式的视频。在桌面浏览器上没有问题。其代码在

之下

     @media screen and (min-width: 400px)
 {

    video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background-size: cover;
    }

 }

小屏幕的媒体查询在

之下

@media only screen and (max-width : 400px) {
background: url(../images/tanisalimmobilebackground.jpg);
    background-size:cover;

    video {
        display:none!important;
    }

}

问题是，当我在iOS Chrome和Safari上查看视频时，视频未被隐藏，并且在背景中显示控件而未启动。

我想要做的是如果宽度最大为400像素，我想显示上面提到的jpg。

Answer 1

我认为您需要指定应具有背景的元素。 E.g：

@media only screen and (max-width : 400px) {
    someelement{
        background: url(../images/tanisalimmobilebackground.jpg);
        background-size:cover;
    }
    video {
        display:none!important;
    }

}

HTML5视频未在媒体查询中隐藏

1 个答案: