javascript - 我的引导轮播背景图像不随浏览器窗口大小调整

Question

好的，所以我是编程新手，我一直在着手一个项目，我正在为个人网站开发前端。我决定在我的 index.html 中使用引导轮播背景图像滑块，但是当我调整浏览器屏幕时，页面大小会缩小，并且轮播文本也会缩小和重叠。

所以这是我想说的链接

我的代码是这样的

.container {
    margin-top: 20px;
}

.navbar{
  background-color : #3e403e;
}

.text h1{
    font-size: 110px
}

.text p{
    font-size: 40px
}

hr{
    background-color: white

}


.text a{
padding: 15px 80px 15px 80px;
}

.header-text {
    position: absolute;
    top: 20%;
    left: 1.8%;
    right: auto;
    width: 96.66666666666666%;
}

<div id="indexCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="images/background.png" alt="Slide One">
        </div>

        <div class="carousel-item">
            <img class="d-block w-100" src="images/background 2.png" alt="Slide Two">
        </div>

        <div class="carousel-item">
            <img class="d-block w-100" src="images/background 3.png" alt="Slide Three">
        </div>
        <div class="header-text hidden-xs">
            <div class="col-md-12 text center">
                <div class="container">
                    <div class="text">
                        <h1 class="display-4" style="color:white"><strong>Beats, Sounds Vibes!!!</strong></h1>
                        <p class="lead" style=" color:white">What are you waiting for?</p>
                        <hr class="my-4">
                        <p style="color: white">XQ's music is made from the purest selection of industry-level sounds
                            and
                            samples. Vibe with him, and you"ll see what we're talking about.</p>
                        <a class="btn btn-primary btn-lg" href="beats.html" role="button">Dive in</a>
                    </div>
                </div>

            </div>
        </div>

    </div>


</div>

我会很感激帮助。

标签： javascriptjqueryhtmlcssbootstrap-4

Answer 1

在 css 中使用 @media screen 和 (max-width: 600px) {} 用于小屏幕

 @media screen and (max-width: 600px) {
.text h1{
    font-size: 40px
}
}