发布了类似的问题,但那里的答案对我没有帮助。
我有一个响应式网站,其中整个背景都是 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。
最佳答案
我认为你需要指定应该有背景的元素。例如:
@media only screen and (max-width : 400px) {
someelement{
background: url(../images/tanisalimmobilebackground.jpg);
background-size:cover;
}
video {
display:none!important;
}
}
关于css - HTML5 视频没有隐藏在媒体查询中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22969353/