真正可靠的折叠逻辑是改方向：桌面端用 flex-direction: row，小屏下用媒体查询切换为 column，并显式设 flex-wrap: nowrap；断点需按内容实测，非固定 768px；需兼顾语义结构、min-width: 0 和 white-space: nowrap 防缩。
flex-direction 从 row 切到 column 才真折叠
只靠 flex-wrap: wrap 做小屏适配，大概率文字挤成一团、高度突变、甚至横向溢出。Flex 本身不“折叠”，它只是换行——而换行在窄容器里根本不可控。
真正可靠的折叠逻辑是改方向：桌面端用 flex-direction: row，小屏下用 @media (max-width: XXXpx) 切成 flex-direction: column。这样菜单项天然垂直堆叠，宽度计算归零，不再依赖内容自适应。
- 切完后显式写
flex-wrap: nowrap，避免旧规则干扰 - 容器若含搜索框或头像，
column下它们自动对齐，比手动margin-left: auto更稳 - 别在同一个 CSS 规则里混写
row和column，必须靠媒体查询彻底分离
断点不能抄 768px，得按内容实测
写死 @media (max-width: 768px) 是最常见却最危险的做法。真实断点取决于你菜单文字总宽、图标尺寸、padding 和字体大小——比如「客户成功案例」六个字，在 512px 就开始挤压，768px 根本没触发。
打开 DevTools，拖窄浏览器窗口，盯住导航何时首次换行、文字截断、图标错位或间距异常，记下那个像素值。优先用 max-width，不是 min-width，符合“从大到小”的适配流。
立即学习“前端免费学习笔记（深入）”；
- 一个导航栏通常只需要 1 个有效断点；要分 iPad 横竖，那是交互逻辑问题，不该靠 CSS 硬切
- 如果用了
vw字体（如font-size: 2.5vw），断点更要重测——字号缩小时，撑开临界点会前移 - 别忽略高 DPR 设备（如 iPhone），CSS 像素和物理像素不一致，固定断点容易失效
汉堡菜单展开后看不见？检查 display 和 position
小屏默认隐藏、点击展开是基本逻辑，但很多人只写了 display: block 却忘了先设 display: none。更隐蔽的问题是：用 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，点击后同步更新，否则读屏器读不到 - 遮罩层要用
<label for="menu-toggle">，不是<button onclick="">，否则 checkbox 状态不同步 - 移动端动画别用
hidden，改用translate-x-full+transition-transform，不触发重排
子项不设防缩机制，Flex 就会崩
默认 min-width: auto 会让导航项死守内容宽度，拒绝压缩。结果就是小屏下文字溢出、高度突变、甚至撑破容器。
给每个 <a> 或 <li> 加 min-width: 0，允许文本折行或缩放；若需单行截断，必须配 white-space: nowrap + overflow: hidden + text-overflow: ellipsis。
- 左侧 logo 和右侧用户区建议加
flex-shrink: 0，中间菜单用flex: 1自适应 - 所有链接统一加
white-space: nowrap，否则窄屏下自动换行会破坏行高一致性 - 别把
<nav>直接设display: flex就完事，里面必须包<ul>，否则屏幕阅读器读不出导航逻辑
<nav><ul><li><a> 的嵌套，又得给 <a> 显式设 min-width: 0 和 white-space: nowrap。少一个，小屏就可能崩。 
