使用 Flex 布局和 Media 查询可实现响应式导航栏：1. 用 Flex 构建桌面端均匀分布的导航结构；2. 在 768px 以下屏幕隐藏导航项，显示汉堡按钮；3. 通过 JavaScript 切换 active 类控制菜单展开收起；4. 使用 clip-path 添加平滑动画，提升移动端交互体验。
制作响应式导航栏是现代网页开发中的常见需求。使用 Flex 布局结合 Media 查询，可以轻松实现一个在桌面端和移动端都表现良好的导航栏。
1. 使用 Flex 布局构建基础结构
Flex 布局非常适合用来对齐和分布导航项。它能自动调整子元素的尺寸和位置，使导航栏内容均匀分布或对齐到一侧。
示例 HTML 结构：对应的 CSS（桌面端样式）：
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #333;
color: white;
}
.nav-links {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links li a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
}
2. 添加媒体查询适配移动端
当屏幕变小时，隐藏导航链接，并显示一个汉堡菜单按钮。点击按钮可切换菜单显示状态（需配合 JavaScript）。
立即学习“前端免费学习笔记（深入）”；
添加汉堡按钮样式：
.menu-toggle {
display: none;
flex-direction: column;
cursor: pointer;
}
.menu-toggle span {
width: 25px;
height: 3px;
background-color: white;
margin: 3px 0;
transition: 0.3s;
}
设置移动端断点（例如 768px）：
@media (max-width: 768px) {
.menu-toggle {
display: flex; /* 显示汉堡按钮 */
}
.nav-links {
position: absolute;
top: 70px;
left: 0;
right: 0;
flex-direction: column;
background-color: #333;
padding: 1rem;
clip-path: circle(0px at top right);
transition: clip-path 0.4s ease-out;
pointer-events: none;
}
.nav-links.active {
clip-path: circle(1000px at top right);
pointer-events: auto;
}
.nav-links li {
margin: 1rem 0;
}
}
3. 使用 JavaScript 控制菜单开关
为汉堡按钮添加点击事件，切换 active 类来控制菜单展开与收起。
const menuToggle = document.querySelector('.menu-toggle');
const navLinks = document.querySelector('.nav-links');
menuToggle.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
说明： 这里用 clip-path 实现了平滑展开动画。也可以用 height 或 transform 实现类似效果。
4. 完善细节提升体验
- 确保移动端菜单有足够点击区域，文字清晰可读
- 在小屏幕上禁用页面滚动，避免背景内容滚动
- 添加过渡动画让交互更自然
- 测试不同设备分辨率下的显示效果
基本上就这些。用 Flex 布局处理布局结构，Media 查询控制响应式断点，再加一点 JavaScript 实现交互，就能做出一个实用又美观的响应式导航栏。
