使用Flexbox和媒体查询可创建响应式导航栏。首先用display: flex和flex-wrap: wrap实现横向排列与自动换行，结合justify-content居中对齐；在max-width: 768px的媒体查询中，通过flex-direction: column使导航项垂直堆叠，提升移动端体验；可选添加JavaScript控制的active类实现折叠展开功能；同时需设置viewport元标签、合理断点与点击区域，确保跨设备可用性。
要在CSS中创建一个响应式导航栏，使用Flexbox配合flex-wrap和媒体查询（media query）是最有效的方法之一。这种方法能确保导航栏在不同屏幕尺寸下自动调整布局，保持良好的用户体验。
1. 使用Flexbox构建基础导航结构
先用Flexbox将导航项水平排列，并设置容器可换行。
示例HTML结构：<nav class="navbar"> <a href="#" class="nav-link">首页</a> <a href="#" class="nav-link">关于</a> <a href="#" class="nav-link">服务</a> <a href="#" class="nav-link">作品集</a> <a href="#" class="nav-link">联系</a> </nav>
对应的CSS样式：
.navbar {
display: flex;
flex-wrap: wrap; /* 允许项目换行 */
justify-content: center; /* 居中对齐 */
background-color: #333;
padding: 10px;
}
<p>.nav-link {
color: white;
text-decoration: none;
padding: 10px 15px;
text-align: center;
}
这里flex-wrap: wrap是关键，它让导航链接在空间不足时自动换到下一行。
立即学习“前端免费学习笔记（深入）”；
2. 添加Media Query适配小屏幕
当屏幕变窄时，可以进一步优化显示效果，比如让所有链接堆叠成单列。
@media (max-width: 768px) {
.navbar {
flex-direction: column; /* 垂直排列 */
align-items: center; /* 居中垂直项 */
}
<p>.nav-link {
width: 100%; /<em> 每个链接占满宽度 </em>/
margin: 5px 0;
}
}
在这个断点下，导航从横向变为纵向堆叠，更适合手机浏览。
3. 提高可用性：添加响应式菜单开关（可选增强）
对于更复杂的场景，可以在小屏幕上隐藏导航项，通过按钮展开。
只需加入JavaScript控制类的切换，再配合CSS隐藏/显示：
@media (max-width: 768px) {
.navbar {
flex-direction: column;
max-height: 60px; /* 默认只显示一行 */
overflow: hidden;
}
<p>.navbar.active {
max-height: 300px; /<em> 展开后显示全部 </em>/
}
}
点击按钮时为.navbar添加active类即可实现展开收起效果。
4. 注意事项与最佳实践
为了让响应式导航更稳定，请注意以下几点：
-
始终设置
meta viewport标签，确保移动端正确缩放：<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 使用
min-width或max-width定义断点时，优先考虑内容而非设备型号。 - 测试多种屏幕尺寸，确保换行自然、无空白拉伸或重叠。
- 给移动端链接增加足够的点击区域（如最小高度、内边距）。
基本上就这些。结合flex-wrap和媒体查询，你可以轻松做出既美观又实用的响应式导航栏，无需依赖框架也能高效完成布局适配。
