响应式导航通过媒体查询、Flexbox和JavaScript实现设备适配：小屏折叠为汉堡菜单，大屏显示横向列表，结合可访问性与动画优化用户体验。
响应式布局在现代网页设计中至关重要，尤其在导航菜单的呈现上。随着用户通过手机、平板、桌面等不同设备访问网站，导航菜单需要能自动适应屏幕尺寸，在小屏幕上折叠成“汉堡菜单”，大屏幕上展开为横向列表。CSS 在这一过程中起着核心作用。
使用媒体查询控制菜单显示方式
媒体查询（@media）是实现响应式导航的基础。通过设定断点，可以判断当前视口宽度并调整导航样式。
例如，当屏幕宽度小于 768px 时，隐藏默认的水平菜单，显示汉堡图标；大于该值时则正常展示完整菜单：
@media (max-width: 768px) { .nav-menu { display: none; } .nav-menu.active { display: flex; } .hamburger { display: block; } } @media (min-width: 769px) { .nav-menu { display: flex; } .hamburger { display: none; } }结合 Flexbox 实现灵活布局
Flexbox 能让导航项在不同屏幕下自动排列，适合构建响应式结构。
立即学习“前端免费学习笔记（深入）”；
将导航容器设为弹性布局，使菜单项水平分布且间距均匀。在移动端折叠状态下，可改为垂直堆叠：
.nav-menu { display: flex; flex-direction: row; list-style: none; margin: 0; padding: 0; } @media (max-width: 768px) { .nav-menu { flex-direction: column; position: absolute; top: 60px; left: 0; width: 100%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } }
配合 JavaScript 控制折叠状态
CSS 提供样式控制，但菜单的展开与收起通常由 JavaScript 触发。
点击汉堡图标时，给 .nav-menu 添加或移除 active 类，从而切换显示状态：
document.querySelector('.hamburger').addEventListener('click', function() { document.querySelector('.nav-menu').classList.toggle('active'); });此时 CSS 中的 .nav-menu.active { display: flex; } 生效，菜单可见。
优化可访问性与用户体验
响应式导航不仅要视觉适配，还需考虑操作便捷性。
- 为汉堡按钮添加 aria-label 提高无障碍支持
- 在移动端确保菜单项有足够点击区域（建议最小 44px 高）
- 使用 transition 添加滑动动画，提升交互流畅感
基本上就这些。通过媒体查询、Flexbox 布局和简单的类切换，就能实现一个实用且美观的响应式导航菜单。关键在于合理设置断点，保证在各种设备上都能清晰访问导航内容。
