最稳妥方案是用display: flex搭配@media切换布局，兼容IE11+，避免flex-wrap: wrap导致小屏换行错位，改用flex-direction: column控制折叠，注意box-sizing: border-box和aria-expanded同步。
用 flexbox 实现响应式导航栏最稳妥
绝大多数现代项目直接用 display: flex 搭配 @media 切换布局，兼容性好（IE11+）、逻辑直白、调试方便。关键不是“能不能做”，而是怎么避免常见断裂点：
-
flex-wrap: wrap在小屏下容易导致菜单项换行错位，建议始终设为nowrap，靠媒体查询控制是否折叠 - 别对
nav或ul直接设width: 100%，它会和父容器 padding 冲突；用max-width: 100%+box-sizing: border-box - 移动端展开按钮（hamburger）的
aria-expanded属性必须和实际状态同步，否则屏幕阅读器会误读
为什么不用 grid 做主导航布局
grid 适合复杂二维排列（比如带 logo、搜索框、多级下拉的导航），但纯横向菜单反而增加冗余复杂度：
- 需要显式定义
grid-template-columns，而菜单项数量常动态变化，硬写repeat(5, 1fr)易撑破容器 - 响应式断点里改
grid-template-areas维护成本高，flex只需改flex-direction和justify-content - IE 不支持
grid（哪怕加前缀），若需兼容旧版企业内网系统，得额外 fallback 方案
position: sticky 导航栏在滚动时消失？检查这三点
响应式导航常配合 position: sticky 实现吸顶，但 Safari 15.4 之前、部分安卓 WebView 会出现定位失效：
- 父容器不能有
overflow: hidden或transform（哪怕只是transform: translateZ(0)） -
top值必须是具体长度（如top: 0），不能是百分比或auto - 如果导航在
shadow DOM内，需确保:host有明确高度，否则 sticky 触发区域计算异常
移动端点击穿透问题：touch-action: manipulation 不是万能解
双击缩放或误触后跳转，常被归因于未加 touch-action，但真实瓶颈往往在事件监听链：
立即学习“前端免费学习笔记（深入）”；
- 给
.nav-toggle按钮加touch-action: manipulation仅阻止双击缩放，不解决 touchstart → click 的 300ms 延迟 - 若用
addEventListener('click', ...)绑定菜单展开，iOS Safari 可能因 focus 状态未及时更新导致首次点击无响应 - 更可靠的做法：用
pointerdown替代click，并确保tabindex在可交互元素上正确设置
