响应式导航栏通过Flexbox或Grid布局结合媒体查询实现多设备适配，使用CSS控制水平与垂直排列，配合JavaScript或纯CSS实现移动端下拉菜单，确保良好用户体验与可访问性。
响应式导航栏是现代网页设计中的关键元素，确保在桌面、平板和手机等不同设备上都能良好显示。通过结合CSS媒体查询与Flexbox或Grid布局，可以轻松实现灵活且适配性强的导航栏。
使用Flexbox创建基础导航栏
Flexbox非常适合用于构建水平排列的导航项，并能自动处理间距和对齐问题。
基本HTML结构如下：
CSS中使用Flexbox让导航栏保持水平并对齐元素：
立即学习“前端免费学习笔记（深入）”；
.navbar {display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #333;
}
.nav-links {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
}
结合媒体查询实现响应式切换
当屏幕变小时，将导航项堆叠为垂直列表，并添加汉堡菜单图标（可通过JavaScript控制展开/收起）。
@media (max-width: 768px) {
.nav-links {
flex-direction: column;
position: absolute;
top: 70px;
left: 0;
width: 100%;
background-color: #444;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
transition: clip-path 0.3s ease;
}
.nav-links.active {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
}
此时可配合JavaScript添加点击事件来切换 .active 类，实现下拉效果。也可使用纯CSS结合隐藏的复选框实现无JS方案。
使用CSS Grid替代Flexbox（可选方案）
Grid适用于更复杂的布局控制。例如，固定Logo位置，其余空间由导航项占据。
.navbar {display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
padding: 1rem;
background: #333;
}
.logo {
color: white;
font-size: 1.5rem;
}
.nav-links {
display: flex;
justify-content: flex-end;
list-style: none;
margin: 0;
padding: 0;
}
在小屏幕上仍可用媒体查询将其转为纵向堆叠：
@media (max-width: 768px) {.navbar {
grid-template-columns: 1fr;
text-align: center;
}
.nav-links {
flex-direction: column;
}
}
基本上就这些。通过Flexbox或Grid搭建结构，再用媒体查询调整断点下的表现，就能实现一个美观又实用的响应式导航栏。关键是合理设置断点、注意可访问性（如触控区域大小），并测试多设备兼容性。不复杂但容易忽略细节。
