用 display: flex 实现响应式导航栏核心是断点控制与可访问性保留：主容器设 flex，子项用 flex: 1 1 auto 并加 min-width: 0；移动端用 aria-controls 和 role="menu" 配合 JS 焦点管理，避免 display: none 或 transform 隐藏。
用 display: flex 实现基础响应式导航栏
核心是让导航项水平排列、自动换行，并在小屏时收起为汉堡菜单。关键不在“多炫”，而在「断点控制 + 可访问性保留」。
常见错误：直接给 <nav></nav> 加 flex-wrap: wrap 却不设最小宽度，导致中等屏幕下文字挤成一团；或用 display: none 隐藏移动端菜单，但没配合 aria-expanded 和键盘焦点管理。
- 主容器设
display: flex，子项用flex: 1 1 auto（允许收缩+不强制等宽） - 移动端用媒体查询隐藏原菜单，显示带
aria-controls的按钮和role="menu"的折叠区域 - 避免对
<a></a>直接设flex: 1—— 它会拉伸文字，改用text-align: center或margin控制间距 - 必须加
min-width: 0到 flex 子项，防止长链接撑破容器（尤其 Safari）
用 display: grid 做等分布局或复杂结构
Grid 更适合需要精确列宽、多行对齐、或带搜索框/徽标/用户头像的复合导航栏。但它在小屏适配上不如 Flex 直观，容易陷入「列数硬编码」陷阱。
典型问题：写 grid-template-columns: repeat(4, 1fr) 后，小屏下仍强行分 4 列，内容重叠；或忽略 grid-auto-flow: column 导致顺序错乱。
立即学习“前端免费学习笔记（深入）”；
- 用
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))))替代固定列数，让浏览器按内容自动计算列数 - 若需 Logo 左对齐、菜单居中、用户入口右对齐，用
grid-column显式定位，而非依赖源顺序 - 移动端切到单列时，别只靠
grid-template-columns: 1fr—— 要配合grid-auto-rows: auto防止高度塌陷 - Grid 的
gap在老版本 Safari 中支持差，必要时降级用margin
响应式切换的关键不是技术，而是断点与交互逻辑
Flex 或 Grid 都只是布局工具，真正决定体验的是「何时切换」「如何过渡」「是否可键盘操作」。很多人卡在 hamburger 按钮点了没反应，其实是 JS 绑定漏了 click 或没处理 Escape 关闭。
- 断点建议用
em或rem（如@media (max-width: 48em)），而非像素值，适配缩放和不同设备 - 折叠菜单用
max-height+overflow: hidden做 CSS 过渡，比height: 0更稳定（避免子元素高度计算误差） - 必须监听
focusout和blur，当焦点离开菜单区域时自动关闭，否则键盘用户无法退出 - 不要用
transform: translateX(-100%)隐藏菜单 —— 屏幕阅读器可能仍读取，改用visibility: hidden+pointer-events: none组合
移动端触摸与 hover 冲突要主动处理
在 iOS 和部分安卓设备上，:hover 会延迟触发或误触发，导致下拉菜单闪退。这不是 bug，是触摸优先策略的副作用。
- 放弃纯 CSS 下拉（即仅靠
<li>:hover > .submenu</li>），改用 JS 控制显隐状态 - 对有子菜单的项，添加
touchstart事件并preventDefault()，避免双击放大干扰 - 用
@media (hover: hover) and (pointer: fine)包裹 hover 样式，确保触屏设备不加载无效规则 - 测试时真机必测 —— Chrome 模拟器的 touch 事件行为和真实设备差异很大
