窗口调整大小时Banner文本与Navbar重叠的响应式问题求助

问题分析 #

你的问题核心在于三点：

1. 布局高度计算冲突：body设置100vh固定高度，但top-bar和nav占据顶部空间，导致Banner的100%高度超出视口，文本的top:50%基于Banner自身高度计算，未考虑顶部导航的占用空间，小屏幕下直接与Navbar重叠。
2. 字体无自适应逻辑：banner-text使用xxx-large这类固定字体尺寸，小屏幕下文本过大，加剧重叠问题。
3. CSS样式重复覆盖：媒体查询外重复定义了.banner-card样式，导致移动端设置的margin-top被覆盖，Banner无法避开Navbar。

具体修复方案 #

直接替换对应代码即可解决问题：

1. 调整全局与Banner基础布局

body{
    font-family: "Poppins", sans-serif;
    min-height: 100vh; /* 改用min-height避免内容溢出截断 */
    margin: 0;
    display: flex;
    flex-direction: column; /* 垂直排列元素，Banner自动占剩余空间 */
}

/* 删除重复的.banner-card定义，合并为以下样式 */
.banner-card{
    flex: 1; /* 占满top-bar和nav之外的剩余空间 */
    margin: 0 auto;
    position: relative;
    background:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTk4oleUiWLncKk9RUvuBOY-h6AMDZdzVOMiwP-F9Rk1Q&s');
    background-repeat: no-repeat;
    background-size: cover;    
}

.banner-card img{
    display: none; /* 已使用背景图，隐藏重复的img元素 */
}

2. 实现Banner文本自适应

用相对单位和范围值让字体随屏幕宽度自动调整，同时限制文本宽度避免贴边：

.banner-text{
    padding: 0 20px; /* 添加左右内边距 */
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
    max-width: 90%; /* 限制文本最大宽度 */
}

.banner-text h4{
    font-size: clamp(1.8rem, 5vw, 3rem); /* 字体在1.8rem到3rem之间，随视口宽度变化 */
    text-transform: uppercase;
    font-weight: bold;
    margin: 10px 0 5px;
}

.banner-text p{
    font-size: clamp(1rem, 2.5vw, 1.2rem); /* 段落字体自适应 */
    font-weight: bold;
    margin-bottom: 5px;
}

3. 修复移动端媒体查询样式

确保移动端Banner的调整逻辑生效：

@media screen and (max-width: 680px){
    nav{
        display: block;
        position: relative;
        padding: 15px 20px;
    }

    .menu{
       margin-top: 15px;
       display: none;
    }

    .menu.active, .toggle{
        display: block;
    }

    .toggle{
        position: absolute;
        top: 15px;
        right: 20px;
    }

    /* 保留移动端Banner的基础样式，避免被覆盖 */
    .banner-card{
        margin-top: 0;
    }
}

4. 处理菜单展开时的遮挡问题

通过JS动态调整Banner位置，避免菜单展开时覆盖文本：

$(function(){
    $(".toggle").on("click", function(){
        if($(".menu").hasClass("active")){
            $(".menu").removeClass("active");
            $(this).find("a").html("<ion-icon name='menu-outline'></ion-icon>");
            $(".banner-card").css("margin-top", "0"); // 菜单关闭，恢复Banner位置
        } else{
            $(".menu").addClass("active");
            $(this).find("a").html("<ion-icon name='close-outline'></ion-icon>");
            $(".banner-card").css("margin-top", $(".menu").outerHeight() + "px"); // 菜单展开，Banner下移对应高度
        }
    });
});

修复后效果 #

• 任意屏幕尺寸下，Banner文本始终居中，字体大小自动适配宽度
• 移动端菜单展开时，Banner自动下移，避免文本被遮挡
• 页面布局稳定，无溢出或重叠问题

内容的提问来源于stack exchange，提问作者Crypto_