不同屏幕尺寸下网站自适应显示异常问题求助

问题说明 #

网站在PC端显示正常，但笔记本或小尺寸屏幕底部出现横向滚动条，调整wrapper样式后，要么恢复正常但低分辨率下适配失效，要么出现顶部导航相互重叠的问题。

显示效果 #

• PC端显示：
  
• 笔记本端显示：
  
• 笔记本调整分辨率后显示：
  

网站结构 #

<div class="wrapper">
<section class="section">
            <div class="container">
                <div class="main__content">
                    <h1>Content</h1>
                    <p>Content</p>
                    <p>Content</p>
                </div>
            </div>
        </section>
</div>

原始容器样式 #

.container {
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    margin: 0 auto;
}

.wrapper {
    min-width: 1720px;
}

已尝试的修改 #

添加以下样式：

.container {
  width: 100%;
  margin: 0 auto;
}

修改后显示效果：

添加背景后显示效果：

需求目标 #

实现网站分辨率降低时自适应收缩，且顶部导航不会相互重叠。

解决方案 #

1. 移除固定最小宽度（核心修复） #

直接删除.wrapper的min-width: 1720px;，这个固定值是小屏幕出现横向滚动条的根本原因——当屏幕宽度小于1720px时，wrapper强制保持宽度超出视口，自然触发滚动。

修改后样式：

.wrapper {
    width: 100%;
    overflow-x: hidden; /* 可选，防止内容意外溢出视口 */
}

2. 优化容器内边距的响应式适配 #

原始.container的固定40px左右内边距在极小屏幕下会过度挤压内容，改用clamp()函数实现动态适配：

.container {
    width: 100%;
    padding-left: clamp(16px, 3vw, 40px);
    padding-right: clamp(16px, 3vw, 40px);
    margin: 0 auto;
}

该函数会根据屏幕宽度自动调整内边距：最小16px（适配小屏）、最大40px（保持大屏留白），中间按3vw比例动态缩放。

3. 顶部导航防重叠处理 #

针对导航重叠问题，提供两种实用方案：

• 方案一：导航项自动换行
  给导航容器添加弹性换行属性，空间不足时自动换行：

  .nav-container {
      display: flex;
      flex-wrap: wrap;
      gap: 16px; /* 给导航项添加间距，避免拥挤 */
      align-items: center;
  }
  

• 方案二：小屏转为汉堡菜单
  当屏幕宽度小于768px时，隐藏常规导航，显示汉堡按钮，点击展开菜单：

  /* 大屏显示常规导航 */
  .nav-container {
      display: flex;
  }
  .hamburger-btn {
      display: none;
  }
  
  /* 小屏切换为汉堡菜单 */
  @media (max-width: 768px) {
      .nav-container {
          display: none;
          position: absolute;
          top: 60px;
          left: 0;
          width: 100%;
          background: #fff;
          flex-direction: column;
          padding: 16px;
      }
      .hamburger-btn {
          display: block;
      }
      .nav-container.active {
          display: flex;
      }
  }
  

  配合简单JS实现切换逻辑：

  document.querySelector('.hamburger-btn').addEventListener('click', function() {
      document.querySelector('.nav-container').classList.toggle('active');
  });
  

4. 全局基础样式重置（可选） #

添加基础重置样式，避免浏览器默认样式导致的意外间距：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    overflow-x: hidden;
}

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