css - HTML5 视频没有隐藏在媒体查询中

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 px，我想显示上面提到的 jpg。

Answer 1

我认为你需要指定应该有背景的元素。例如:

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

}