响应式导航菜单需CSS媒体查询与Flexbox结合实现，768px为推荐断点；移动端用checkbox伪开关配合max-height过渡动画实现汉堡菜单；桌面端用justify-content和margin-left:auto控制对齐；触屏需保证点击区域≥44px并禁用user-scalable=no。
响应式导航菜单的核心是 CSS 媒体查询 + Flexbox 布局
纯 HTML 无法实现响应式导航，index.html 只负责结构，关键在配套的 CSS。常见错误是只写 <nav> 和 <ul><li> 就以为完事，结果小屏下菜单堆成一团或直接溢出。必须用 @media 控制断点，并用 display: flex 管理主菜单流式排列。
推荐断点设为 768px（平板竖屏临界值），这是多数设备兼容性与可读性的平衡点。别用 480px 或 320px 作唯一断点——现代手机横屏、折叠屏、iPad mini 都可能落在中间区间。
移动端需要汉堡按钮，但不能靠 JS 强控显示/隐藏
用纯 CSS 实现汉堡菜单切换更可靠，避免 JS 加载失败导致菜单永远收起。核心是利用 <input type="checkbox"> 的 :checked 状态配合 ~ 或 + 选择器控制 <ul> 的 max-height 或 opacity。
- 把
<input>放在<label>前，用for关联，确保点击区域足够大 - 移动端菜单
<ul>默认设max-height: 0+overflow: hidden，:checked ~ ul设为max-height: 300px（数值要略大于所有<li>总高） - 别用
display: none切换，它无法触发 CSS 过渡动画；改用visibility+opacity或max-height
Flexbox 的 flex-wrap 和 justify-content 决定桌面端对齐效果
桌面端菜单常需右对齐登录/注册项，或居中 logo，这时不能靠 float 或绝对定位硬塞。直接用 Flexbox 的 justify-content 和 margin-left: auto 更稳定。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
示例结构：
<nav>
<ul class="nav-list">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li class="logo"><a href="#">LOGO</a></li>
<li style="margin-left: auto"><a href="#">登录</a></li>
</ul>
</nav>
.nav-list 设 display: flex 后，margin-left: auto 会让后续 <li> 被推到最右。注意：不要给 .logo 加 margin: auto，它会破坏流式顺序。
字体大小和点击区域必须适配触屏
小屏下文字太小、链接间距太窄，会导致误点或缩放——这不是“看起来丑”，而是 WCAG 可访问性失败。iOS Safari 默认最小点击区域是 44px × 44px，Android 推荐 48dp。
- 移动端
a标签加padding: 12px 16px，确保高度 ≥ 44px - 字体用
rem或em，比如font-size: 1.125rem（即 18px），避免固定px - 禁用
user-scalable=no在<meta name="viewport">中，否则视障用户无法放大阅读
最易被忽略的是 hover 效果在触摸设备上无意义。别给移动端菜单加 :hover 下划线或背景色变化——手指没有悬停状态，这些样式只会干扰视觉焦点。
