纯html无法实现响应式导航，关键在css媒体查询+flexbox布局；移动端问题多源于html结构错误（如li平级）或css定位脱离文档流（需设submenu为position:static），而非js缺陷。
纯 HTML 模板无法实现响应式导航，关键在配套 CSS 的媒体查询 + Flexbox 布局逻辑；移动端交互问题（如点不中、点透、卡顿）几乎都源于结构或定位写法错误，而非 JS 逻辑缺陷。
为什么用 <nav></nav> 而不是 <div class="nav">
<p>浏览器和屏幕阅读器靠 <code><nav></nav> 识别“这是主导航区”，不是为了好看或 SEO 做法。如果把 logo、搜索框、用户头像全塞进一个 <nav></nav>，读屏器会误判整个区域为“可跳转链接集合”，实际只有 <a></a> 才该在里面。多个导航区（比如页脚也有链接）必须各自独立用 <nav></nav>，并加 aria-label 区分，例如：<nav aria-label="主导航"></nav> 和 <nav aria-label="页脚导航"></nav>。
移动端汉堡菜单为什么点开不收、子菜单错位
根本原因不是 JS 写错了，而是 HTML 结构没表达父子关系，或 CSS 定位脱离文档流。常见错误是所有 <li> 平级书写，导致子菜单 <ul class="submenu"></ul> 不是父 <li class="has-submenu"> 的直接子元素——这样 .has-submenu.active > .submenu 选择器完全不生效。
小屏下必须重置子菜单定位：.submenu 显式设 position: static，移除 top/left，改用 margin-top 控制间距；若需全宽展开，加 width: 100% 和 box-sizing: border-box 防滚动条意外出现。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
max-height 动画替代 display: none 的实操要点
用 display: none 切换菜单会导致过渡动画失效，必须用可动画属性控制显隐：
- 默认状态：菜单
<ul></ul>设max-height: 0+overflow: hidden+transition: max-height 0.3s ease - 激活状态（
:checked ~ ul或.is-active > ul）：设max-height: 300px（数值要略大于所有子项总高，不能写none） - 别用
visibility或opacity单独控制——它们不阻止点击穿透，且无高度变化，无法解决触控区域错位 - 移动端
<label></label>必须包裹<input type="checkbox">，且for属性正确关联，确保点击区域 ≥ 44px
Flexbox 布局里哪些参数容易引发窄屏错乱
桌面端设 display: flex 很简单，但窄屏下出问题常因以下参数失控：
-
flex-wrap: nowrap（默认值）+ 宽度固定 → 小屏直接横向溢出，应改为flex-wrap: wrap -
flex-shrink: 1（默认）→ 文字变长时被压缩变形，应显式设flex-shrink: 0或flex: 0 0 auto - 用
justify-content: space-between对齐两端时，项数为奇数会视觉不均，可改用space-around或加伪元素平衡 - 每个
<a></a>必须设min-height: 44px（含 padding），保障触控体验；iOS Safari 中position: fixed+transform可能闪烁，优先用position: sticky
最易被忽略的是：所有断点判断必须靠 CSS 媒体查询驱动，JS 只负责切换状态类名；一旦在 JS 里写 window.innerWidth 判断显示逻辑，窗口缩放或横竖屏切换时行为就会错乱。结构、样式、交互三者必须解耦，否则维护成本指数上升。
