用 display: flex + @media 做响应式导航栏的关键是：小屏切 flex-direction: column、实测断点、避免 display: none 隐藏菜单、设 min-width: 0 和触控热区。
直接用 display: flex + @media 就能做出可用的响应式导航栏，但多数人卡在换行错乱、点击失效、断点不准这三处——不是 Flex 不行，是没控制好收缩逻辑和交互边界。
flex-direction 必须从 row 切到 column
桌面端用 flex-direction: row 没问题，但小屏下还保持 row，只靠 flex-wrap: wrap 会压缩文字、错位、甚至横向溢出。真正可靠的折叠逻辑是切方向：小屏改 flex-direction: column，让菜单项垂直堆叠，天然规避宽度计算问题。
- 别在同一个 CSS 规则里混写 row 和 column，必须用
@media (max-width: XXXpx)彻底分离 - 切完
column后，flex-wrap就没意义了（单列不涉及换行），建议显式设为flex-wrap: nowrap避免干扰 - 如果菜单容器里有搜索框或用户头像，
column下它们会自然垂直排列，比用margin-left: auto强行右对齐更稳定
断点不能硬写 768px，得按内容实测
写死 @media (max-width: 768px) 是最常见却最危险的做法。真实断点取决于你导航文字总宽、图标尺寸、padding 设置。比如「产品介绍」「客户案例」六个字的菜单项，在 512px 就开始挤压，768px 根本没触发。
- 打开 DevTools，手动拖窄浏览器窗口，盯住导航何时首次换行、文字截断或图标错位，记下那个像素值
- 优先用
max-width，不是min-width，符合“从大到小”的适配流 - 一个导航栏通常只需要 1 个有效断点；真要分三级（如 iPad 横竖不同），那是交互逻辑问题，不该靠 CSS 布局硬切
汉堡菜单展开后看不见？检查 display 和 position
小屏下菜单默认隐藏，点击按钮才展开。很多人用 display: none 隐藏，但 JS 切换的是 .nav--expanded 类，而 CSS 里写的却是 .nav-menu.show { display: flex }——类名不一致，白忙一场。
立即学习“前端免费学习笔记（深入）”；
- 折叠态别用
display: none，改用position: absolute; top: 100%，避免布局塌陷影响 JS 高度计算 - 展开态用
.nav--expanded .nav-list { display: flex }，确保父容器已设display: flex - 汉堡按钮必须带
aria-expanded和aria-controls，点击后同步更新属性值，否则读屏器完全读不到
子项不设防缩机制，Flex 就会崩
默认 min-width: auto 会让导航项死守内容宽度，拒绝压缩。结果就是小屏下文字溢出、高度突变、甚至撑破容器。
- 给每个
<a>或<li>加min-width: 0，允许文本折行或缩放 - 设
white-space: nowrap的同时，必须配overflow: hidden+text-overflow: ellipsis（仅单行） - 所有可点击元素必须有 ≥44px × 44px 的触控热区，用
padding扩展，别只靠字体大小
最常被忽略的是导航项文字断行和点击热区不足，这两点在测试时往往被当成“小问题”跳过，结果上线后用户在 iPhone 上反复点不中、安卓读屏器完全读不到菜单——Flex 布局本身很稳，崩掉的从来都是边界控制。
