响应式导航栏需控制收缩逻辑和交互边界：子项设 white-space: nowrap 和 flex-shrink: 0；断点依文字总宽实测确定，用 max-width；汉堡菜单宜用 JS 控制 .nav--expanded 类，配合 aria 属性与 44×44px 点击热区。
直接用 display: flex + @media 就能做出可用的响应式导航栏，但多数人卡在换行错乱、点击失效、断点不准这三处——不是 Flex 不行，是没控制好收缩逻辑和交互边界。
flex-wrap: wrap 为什么不起作用？
默认 flex-wrap 是 nowrap，但即使你显式写了 wrap，导航项仍可能被压缩变形甚至溢出容器。根本原因是子项没设防缩机制。
- 给每个导航链接（如
.nav-item a）加white-space: nowrap，防止文字在窄屏里自动断行导致高度突变 - 给导航项容器（如
.nav-item）设flex-shrink: 0，否则浏览器会强行缩小它来塞进空间 - 避免在
.nav上同时写width: 100%和max-width，盒模型计算容易失准 - 如果用了
gap，注意 Safari 旧版本不支持，可降级为margin
媒体查询断点该设多少？
别抄 768px 或 992px。真实断点取决于你导航文字的总宽度——比如有「产品介绍」「客户案例」「联系我们」六个字的菜单项，实际开始挤压的临界点可能在 512px，而不是通用平板值。
- 先写桌面端样式，然后手动拖浏览器窗口变窄，盯住导航何时开始不对齐或文字换行，记下那个像素值
- 用
@media (max-width: XXXpx)，不是min-width，更符合“从大到小”的适配流 - 一个导航栏通常只需要 1 个有效断点；多断点易失控，真要分三级（比如平板横竖不同），那是交互逻辑问题，不该靠 CSS 布局硬切
汉堡菜单必须用 JS 吗？
纯 CSS 方案（比如用 input[type="checkbox"] + :checked ~ .nav-list）能跑，但存在三个硬伤：iOS Safari 对伪元素点击不稳定、键盘无法聚焦、屏幕阅读器跳过整个导航结构。
- 保持 Flex 导航结构不变，只用 JS 控制一个
.nav--expanded类加在<nav></nav>上 - CSS 中写
.nav--expanded .nav-list { display: flex; }，折叠态用position: absolute; top: 100%而非display: none - 汉堡按钮必须带
aria-expanded和aria-controls，点击后同步更新属性值 - 移动端点击热区至少 44×44px，别只靠
font-size: 14px，得用padding或min-width/min-height补足
最常被忽略的是：导航项文字断行和点击热区不足，这两点在测试时往往被当成“小问题”跳过，结果上线后用户在 iPhone 上反复点不中、安卓读屏器完全读不到菜单——Flex 布局本身很稳，崩掉的从来都是边界控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
