默认移动端折叠导航，用@media (min-width: 768px) 恢复横向flex布局；桌面端需设flex-wrap: nowrap、flex-shrink: 0及margin-left: auto右对齐；汉堡菜单推荐max-height过渡而非display切换，并确保按钮语义化、触控区域≥44px且z-index足够。
怎么用 @media 控制导航在小屏幕收起
关键不是“加汉堡图标”，而是先让默认导航在小屏下不显示，再用媒体查询切回桌面布局。主流做法是：默认移动端样式（折叠态），@media (min-width: 768px) 里恢复横向排列。别反着写，否则在旧版 Safari 或某些安卓 WebView 里容易触发两次重排。
常见错误是把 @media 写成 (max-width: 767px) 并放在 CSS 末尾——这样会导致桌面端样式被覆盖，调试时元素明明写了 display: flex 却不生效。
- 断点值建议用
768px（对应平板竖屏）或992px（常见 Bootstrap 断点），避免用600px这类过于狭窄的值，不然在 Pixel 4、iPhone 12 等设备上会误判 - 不要在媒体查询里重复写整个导航结构，只覆盖必要属性：比如
flex-direction、display、justify-content - 如果导航项有
margin或padding，记得在小屏下重置，否则汉堡菜单弹出后内容会偏移
怎么用 display: flex 让菜单横向铺开又不换行
桌面端用 flex 是为了控制对齐和自动分配空间，但直接写 display: flex 不够——必须配合 flex-wrap: nowrap 和子项的 flex-shrink: 0，否则当窗口缩窄时，菜单项会被压缩甚至换行，破坏导航完整性。
另外，别依赖 justify-content: space-between 对齐左右两端，它在项数变化时容易错位。更稳的方式是用 margin-left: auto 推最后几项到右侧。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex+align-items: center，保证文字垂直居中 - 每个菜单项加
flex-shrink: 0，防止被浏览器压缩 - 如需右对齐某几个项（如登录/搜索），给它加
margin-left: auto，而不是靠justify-content
汉堡图标点击后菜单展开，为什么 display: block 不生效
因为 CSS 里没定义展开状态的样式，或者 JavaScript 切换的是错误的 class 名。最常见的是：HTML 中菜单容器默认 display: none，JS 却去 toggle .active，但 CSS 里没写 .nav-menu.active { display: block; }。
另一个坑是用了 visibility: hidden 配合 opacity 做淡入，但忘记加 transition 或写错了属性名（比如写成 opactiy），结果动画卡住。
- 推荐用
max-height+overflow: hidden实现带高度过渡的展开，比纯display切换更平滑 - 如果用
display，确保 JS 操作的 class 在 CSS 中有明确声明，例如：.nav-menu.show { display: flex; } - 检查是否在移动端误加了
pointer-events: none到汉堡按钮上，导致点击无响应
怎么让汉堡按钮本身响应点击且适配触控
按钮太小、没加 touch-action: manipulation、或者用了 div 而非 button 标签，都会导致 iOS 上点击延迟或失效。
别用 onclick="toggle()" 写内联事件，既难调试又无法阻止默认行为。应该用 addEventListener('click', ...)，并在函数开头加 event.preventDefault() 防止跳转。
- 汉堡按钮必须是
<button type="button"></button>，语义正确且自带焦点与可访问性支持 - 最小点击区域至少
44px × 44px（iOS 触控最小建议），可用padding扩展，别只靠font-size - 加
touch-action: manipulation减少 iOS 300ms 点击延迟
@media (min-width: 768px) { .nav-menu { display: flex; } .nav-menu li { flex-shrink: 0; } .nav-menu .search, .nav-menu .login { margin-left: auto; } } .nav-toggle { display: block; width: 44px; height: 44px; padding: 0; touch-action: manipulation; } .nav-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, opacity 0.2s; } .nav-menu.active { max-height: 500px; opacity: 1; }
实际中最容易被忽略的是：没给 .nav-menu 设固定高度上限（max-height），导致用 height: auto + transition 时动画失效；还有就是汉堡按钮的 z-index 太低，被轮播图或 Banner 遮住，用户点不到。