Div响应式布局问题：屏幕小于1000px时用=符号收纳菜单

没问题，我来帮你搞定这个响应式折叠菜单！核心思路是用CSS媒体查询控制不同屏幕下的显示逻辑，再加一点点JavaScript处理菜单的展开/收起。结合你的代码片段，具体实现步骤如下：

首先要给导航栏添加一个折叠触发按钮（就是你说的"="符号），并把菜单内容统一放在一个容器里。另外一定要加viewport元标签，这是响应式生效的基础：

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <!-- 必须添加的viewport标签，让浏览器正确识别屏幕宽度 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <!-- 导航栏容器 -->
  <nav class="navbar">
    <!-- 小屏幕显示的折叠按钮 -->
    <button class="menu-toggle" id="menuToggle">
      = <!-- 你要的"="符号，也可以换成Font Awesome汉堡图标：<i class="fa fa-bars"></i> -->
    </button>
    <!-- 菜单列表容器 -->
    <ul class="nav-menu" id="navMenu">
      <!-- 这里替换成你实际的菜单项 -->
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">联系</a></li>
    </ul>
  </nav>

  <!-- 你的页面其他内容 -->
  <main>
    <!-- ... -->
  </main>

  <!-- 引入交互脚本 -->
  <script src="script.js"></script>
</body>
</html>

先写桌面端的默认样式，再用媒体查询针对小于1000px的屏幕定义折叠逻辑：

/* 桌面端默认样式 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background-color: #333; /* 可根据你的设计调整颜色 */
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li {
  margin-left: 1.5rem;
}

.nav-menu a {
  color: #fff;
  text-decoration: none;
}

/* 折叠按钮默认在桌面端隐藏 */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}

/* 小屏幕规则（屏幕宽度≤999px，即小于1000px） */
@media (max-width: 999px) {
  /* 显示折叠按钮 */
  .menu-toggle {
    display: block;
  }

  /* 默认隐藏菜单，用绝对定位让菜单占满屏幕宽度 */
  .nav-menu {
    position: absolute;
    top: 60px; /* 对应导航栏的高度，根据你的实际情况调整 */
    left: 0;
    right: 0;
    background-color: #333;
    flex-direction: column;
    padding: 1rem;
    display: none;
  }

  /* 菜单展开时的类，用来控制显示 */
  .nav-menu.active {
    display: flex;
  }

  /* 小屏幕下菜单项垂直排列，去掉左右间距 */
  .nav-menu li {
    margin: 0.5rem 0;
    margin-left: 0;
  }
}

实现点击"="按钮时切换菜单的展开/收起状态：

// 获取按钮和菜单元素
const menuToggle = document.getElementById('menuToggle');
const navMenu = document.getElementById('navMenu');

// 点击按钮切换菜单的显示状态
menuToggle.addEventListener('click', () => {
  navMenu.classList.toggle('active');
});

关键细节说明 #

• viewport元标签：必须添加，否则移动端浏览器会以桌面宽度渲染页面，响应式失效。
• 媒体查询@media (max-width: 999px)：刚好覆盖所有小于1000px的屏幕尺寸。
• classList.toggle('active')：通过切换CSS类来控制菜单的显示/隐藏，比直接修改样式更灵活易维护。

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