Question

大家好，我的问题如下。如何使 H1 标签具有响应性，以便它不会在我的图像上移动框。我的项目使用的是 bootstrap 4.5.2。

这是电脑版的图片

这是移动版的图片（H1标签向左移动了1个框）

这是我的 html 代码

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
    officeMap
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">officeMap</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="dynamic-content">
                <img src="PlanPage/Resources/grid.png" alt="officeMap" class="img-fluid">
                <div class="room1"><h1>1</h1></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

这是我的 css

body {
    background-image: url('Resources/blurred_desk1.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.room1 {
    position: absolute;
    bottom: 10%;
    left: 12%;
}

我使用的图片 https://hbr.org/resources/images/article_assets/2013/04/grid.png

Answer 1

您不能使用百分比值并期望它们以这种方式表现。

您可以使用 flexbox 并为图像设置固定大小并缩小 h1 以使用 flex-shrink-1 获得剩余宽度。

是这样的： Codepen

Answer 2

我像这样试过，它奏效了。

@media screen and (min-width: 1200px){
    .room1 {
        position: absolute;
        bottom: 10%;
        left: 12%;
    }
}
@media screen and (max-width: 1199px) and (min-width: 990px) {
    .room1 {
        position: absolute;
        bottom: 10%;
        left: 18%;
    }
}
@media screen and (max-width: 989px) {
    .room1 {
        position: absolute;
        bottom: 10%;
        left: 30%;
    }
}

如何使 H1 标签具有响应性？

2 个答案: