移动端导航栏不折叠需检查flex-wrap与min-width冲突：设flex-wrap: wrap、删min-width和white-space: nowrap、用flex: 1 1 calc(25% - 1rem)适配；汉堡菜单用:checked+label纯css实现；下拉菜单改用:focus-within；点击热区需≥44×44px并加aria属性。
移动端导航栏不折叠？检查 flex-wrap 和 min-width 冲突
Flex 默认是单行布局，flex-wrap: nowrap（浏览器默认值），哪怕屏幕只有 320px，所有菜单项也硬挤在一行，导致横向滚动或溢出。这不是“没写媒体查询”，而是布局机制本身没切换。
- 给导航容器（如
<nav></nav>或.navbar）显式加flex-wrap: wrap - 删掉
<li>或<a></a>上的min-width、white-space: nowrap—— 它们会阻止换行 - 用
flex: 1 1 calc(25% - 1rem)替代固定宽度，适配项数变化；小屏下自动收缩+折行 - Safari 14 及更早版本对
flex: 1解析有 bug，建议写全：flex: 1 1 0
纯 CSS 实现汉堡菜单展开？用 :checked + label 最稳
JavaScript 不是必须的，而且容易因加载失败或执行错误导致菜单永远不可见。:checked 是原生状态，IE9+ 全兼容，无需等待脚本执行。
- HTML 中放一个隐藏的
<input type="checkbox" id="nav-toggle">，紧挨着<label for="nav-toggle"></label> -
<label></label>包裹汉堡图标，整个区域都可点击（含触摸热区） - CSS 里用
#nav-toggle:checked ~ .nav-menu控制菜单显示，不要用display: none/ block切换 —— 改用opacity: 0; visibility: hidden;+transition更顺滑 -
.nav-menu初始设max-height: 0; overflow: hidden;，:checked时设max-height: 300px（不能写none，否则过渡失效）
移动端 hover 失效？别依赖它控制下拉菜单
手机没有 hover 状态，nav:hover .dropdown 在触屏设备上完全无效。点一次无反应、点两次才展开，是典型误用。
- 改用
:focus-within：给导航容器加tabindex="0"，然后写.navbar:focus-within .dropdown - 若需兼容 IE 或老 Android，只写最简 JS：
toggleBtn.addEventListener('click', () => menu.classList.toggle('open')) - 下拉菜单必须包裹在
position: relative的父容器内，自身设position: absolute; top: 100%; z-index: 10;，否则会被遮挡或定位飘移 - 避免只靠
display控制显隐 ——opacity + visibility组合过渡更可靠，且不会影响焦点流
点击区域太小、可访问性差？这些细节决定真实体验
手指操作不是鼠标，44×44px 是 iOS/Android 推荐最小点击区域。光靠视觉大小不够，得靠 padding 或伪元素撑开实际可点击范围。
-
.mobile-menu-icon加padding: 12px，内部.bar用height: 2px+margin: 4px 0，整体点击热区远超图标本身 - 汉堡按钮加
aria-label="打开导航菜单"，菜单容器加role="navigation"和aria-hidden="true/false" - 菜单展开后，焦点应自动移到第一个链接（用
menu.firstElementChild.focus()或autofocus属性） - 软键盘弹出时，iOS Safari 会压缩视口高度，
height: 100vh可能塌陷，改用min-height: 100vh更稳
真正难的不是写出那几行 flex 或 @media，而是在手指划过、键盘弹起、横竖屏切换那一瞬间，菜单仍能准确定位、可聚焦、可关闭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
