屏幕缩小时按钮等元素重叠的CSS问题解决咨询

问题根源 #

1. .content 使用绝对定位强制垂直居中，小屏幕下内容高度超出容器时无自适应空间，导致元素挤压重叠
2. 按钮设置固定宽度150px，小屏幕横向空间不足时无法自动换行或缩小
3. 导航栏未做响应式适配，小屏幕下链接会挤在一起

解决方案 #

1. 补充HTML基础响应式配置 #

在<head>中添加viewport元标签，确保移动端浏览器正确识别屏幕尺寸：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 修改CSS实现自适应布局 #

调整内容容器样式

将.content的绝对定位改为相对定位，配合flex布局实现居中同时保留自适应高度：

.content{
    width: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #fff;
    min-height: auto;
    padding: 20px 0;
}

优化按钮布局

用flex容器让按钮自动换行，替换固定宽度为最大宽度，同时调整间距适配小屏幕：

/* 给按钮外层容器添加flex样式 */
.content > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0 10px;
}

button{
    max-width: 150px;
    width: calc(50% - 10px); /* 小屏幕下一行显示2个按钮 */
    min-width: 120px;
    padding: 15px 0;
    text-align: center;
    border-radius: 25px;
    font-weight: bold;
    border: 2px solid #009688;
    background: transparent;
    color: lightblue;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

导航栏响应式适配

添加媒体查询，小屏幕下将导航菜单改为垂直排列：

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.navbar ul {
    display: flex;
    list-style: none;
    gap: 20px;
    padding: 0;
}

.navbar ul li a {
    color: #fff;
    text-decoration: none;
}

/* 小屏幕适配 */
@media (max-width: 768px) {
    .navbar ul {
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 20px;
        background-color: rgba(0,0,0,0.8);
        padding: 10px;
        border-radius: 8px;
    }
}

完整修改后代码 #

HTML部分

<!DOCTYPE HTML>
<HTML>
<head>
    <title>GymBros - Your Fitness Guide</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="banner">
        <div class="navbar">
            <img src="logo.png" class="logo">
            <ul>
                <li><a href="#">About Us</a></li>
                <li><a href="#">PR Calculator</a></li>
                <li><a href="#">Calorie Deficit Calculator</a></li>
            </ul>
        </div>

        <div class="content">
            <div>
                <button id="legs"><span></span>LEGS</button>
                <button id="arm"><span></span>ARMS</button>
                <button id="core"><span></span>CORE</button>
                <button id="back"><span></span>BACK</button>
                <button id="chest"><span></span>CHEST</button>
                <button id="shoulder"><span></span>SHOULDERS</button>
            </div>
        </div>

        <div id="quoteCircle">
            <p id="quoteText">Quotes</p>
        </div>

        <script src="script.js"></script>
    </div>
</body>
</html>

CSS部分

/* 全局基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
}

.banner {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: rgba(0,0,0,0.5);
}

.logo {
    height: 50px;
}

.navbar ul {
    display: flex;
    list-style: none;
    gap: 20px;
}

.navbar ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}

.content{
    width: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #fff;
    min-height: auto;
    padding: 20px 0;
}

.content > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0 10px;
}

button{
    max-width: 150px;
    width: calc(50% - 10px);
    min-width: 120px;
    padding: 15px 0;
    text-align: center;
    border-radius: 25px;
    font-weight: bold;
    border: 2px solid #009688;
    background: transparent;
    color: lightblue;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

#quoteCircle {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0,0,0,0.5);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#quoteText {
    color: #fff;
    font-size: 14px;
}

/* 小屏幕适配 */
@media (max-width: 768px) {
    .navbar ul {
        flex-direction: column;
        position: absolute;
        top: 70px;
        right: 20px;
        background-color: rgba(0,0,0,0.8);
        padding: 15px;
        border-radius: 8px;
        gap: 10px;
    }

    button {
        width: calc(100% - 10px);
    }
}

说明 #

• 新增box-sizing: border-box确保元素尺寸计算包含内边距和边框
• 按钮容器用flex-wrap实现自动换行，不同屏幕下自动调整每行按钮数量
• 导航栏在小屏幕下转为垂直下拉菜单，避免链接挤压
• 补充了banner和body的基础样式，确保页面高度铺满屏幕

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