html - 增加 Bootstrap 内容的高度

Question

我有一个 div，它是视频的内容，它工作正常，但问题是，每次我尝试查看它如何适应不同的设备时，视频的高度都会降低，我认为它是 Bootstrap 的正常行为，但问题是我需要在设备较小时增加该 div，我该怎么做？

这是我的视频和里面的文字的html

 <section class="content_section white_section bg2">
        <div class="embed-responsive embed-responsive-16by9">


            <div id="video_overlays"></div>

            <div class="container vertical-center ">
                <div id="over">
                    <div class="title-wrapper main_title  centered upper">
                        <h2><span class="line"></span>Simple solutions for complex problems</h2>
                    </div>

                    <div class="description4 centered">
                        <p dir="ltr"><b id="docs-internal-guid-7b963bcb-e991-08ff-b846-612f8d57baee">The world is a complex place.&nbsp;</b><br><b>Our solutions are designed to allow organisations to quickly and simply use their information without adding layers and layers of heavy software.<br>
Usability and simple deployment are the key words.</b></p>

                    </div>
                </div>
            </div>
            <div id="player" width="100%" height="100%" style="z-index:-1">
            </div>
        </div>

    </section>

Answer 1

您可以使用媒体查询来做到这一点。假设您的视频播放器所在的 div 的 ID 为#player。请注意，下面使用的所有 px 和 vh 值仅用于示例。您可以根据需要设置它们。在下面的示例中，较小的设备具有增加高度的视频播放器。

@media screen and (min-width: 1200px ) {
#player {
    height:500px; //or height:50vh
} 
}

上面的代码意味着对于宽度超过 1200px 的屏幕尺寸，高度将为 500px(您可以将其设置为任何您想要的)

@media screen and (max-width: 1199px) and (min-width: 600px) {
#player {
    height:700px; //or height:70vh 
}
}

上面的代码意味着对于宽度在 600px 和 1199px 之间的屏幕尺寸，高度将为 700px。下面的代码表示对于低于 600 像素的屏幕分辨率，视频播放器的高度将为 800 像素。

@media screen and (max-width: 599px) {
#player {
    height:800px; //or height:80vh
}
}

在此处阅读有关媒体查询的更多信息: https://www.w3schools.com/css/css3_mediaqueries_ex.asp