使用媒体查询与Flexbox实现响应式导航，结合汉堡菜单提升移动端体验。
制作响应式导航栏的关键在于让导航在不同屏幕尺寸下都能良好显示，尤其在移动设备上能折叠或隐藏。以下是几种常用方法：
使用媒体查询（Media Queries）
通过 @media 查询，根据屏幕宽度调整导航栏布局。
例如：- 桌面端显示为横向菜单
- 移动端则变为垂直堆叠或隐藏成“汉堡菜单”
示例代码：
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
@media (max-width: 768px) {
nav ul {
flex-direction: column;
}
}
使用 Flexbox 布局
Flexbox 能让导航项自动适应容器空间，是实现响应式的理想选择。
立即学习“前端免费学习笔记（深入）”；
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 用
display: flex让菜单项水平排列 - 配合
flex-wrap: wrap允许换行 - 结合
justify-content控制对齐方式
添加汉堡菜单（Hamburger Menu）
在小屏幕上隐藏菜单项，用一个按钮触发显示。
- 使用
☰或伪元素创建图标 - 通过 JavaScript 切换菜单的可见性
- 用 CSS 控制展开与收起动画
结构建议：
<nav>
<div class="menu-toggle">☰</div>
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
CSS 中给 .menu 添加 display: none，在小屏时通过 JS 添加类名使其显示。
使用 CSS Grid（可选）
对于更复杂的布局，可用 Grid 定义区域和自适应列。
- 适合多层级或带下拉菜单的导航
- 配合媒体查询动态调整网格结构
基本上就这些。核心是结合 Flexbox 和媒体查询，再加一点交互逻辑，就能做出流畅的响应式导航栏。不复杂但容易忽略细节，比如移动端点击区域太小、字体缩放等问题，记得测试真机效果。
