响应式视频与 CSS 中的 DIV 冲突

Question

我的页面上有一个响应式视频，我已设置为在显示屏宽度低于 767 像素时调整为静态背景图像（对于智能手机）。

问题是，768px 到 1199px（宽度）之间的任何东西，例如。在 iPad 上，我的视频 DIV 容器高度没有响应，导致视频下方出现白边。理想情况下，容器应与视频平行调整 266px - 347px（高度）height/width。

.videobg 是我的容器，.videoheader 是视频本身。

代码如下：

.videobg {
margin:0;
padding:0;
width:100%; 
height:100%;
position: static;
z-index: -100;
min-height: 250px;
max-height: 423px;
}

.videoheader {
    margin:0;
    padding:0;
    width:100%;
    height:100%;

}

@media (max-width: 767px) {
    .videobg {
        background: url('images/home/header.jpg') center center / cover no-repeat;
        height:266px;
    }

    .videoheader {
        display: none;
    }
}


@media(max-width:768px){
.videobg {
height:266px;
     }
}

@media (max-width: 884px) {
    .videobg {
        height:280px;
    }
}


@media (max-width: 1000px) {
    .videobg {
        height:347px;
    }
}

Answer 1

对于这种特定情况，解决方案看起来是：

.videobg {
  font-size: 0px;
}

我强烈建议对响应式视频使用其他缩放比例（例如 like this），天啊，这么多媒体查询！ :D 但是，呃，如果它适合你，那很好。

响应式视频与 CSS 中的 DIV 冲突

Responsive video conflicting with DIV in CSS

html

css

video

responsive-design

responsiveness