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
} 
}

以上代码表示对于宽度超过1200像素的屏幕尺寸，高度将为500像素（您可以将其设置为您想要的任何颜色）

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

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

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

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

增加引导程序内容的高度

1 个答案: