纯 CSS 实现响应式导航菜单可行，关键用@media断点控制布局+checkbox:checked模拟开关状态，规避JS失效风险；HTML中input需置于label和nav-list之前以支持~选择器，max-height过渡需精准设值，768px为稳妥断点。
纯 CSS 实现响应式导航菜单是可行的，关键在于用 @media 控制断点 + <input type="checkbox"> 模拟开关状态，完全规避 JS 加载失败或执行阻塞导致菜单不可用的问题。
为什么不用 JavaScript 控制显示/隐藏
很多初学者直接用 display: none + JS 切换 class，结果在弱网、JS 报错或禁用 JS 的环境下，移动端菜单永远收不起来或打不开。而 <input type="checkbox"> 是原生表单控件，状态切换可靠，且能被 :checked 伪类精准捕获，CSS 过渡（如 max-height）也能正常触发。
- 避免依赖 JS 执行时机：checkbox 点击即生效，不卡在 DOM ready 或事件绑定之后
- 兼容性更好：IE9+ 均支持
:checked和相邻兄弟选择器~ - 可访问性更优：屏幕阅读器能识别 checkbox 状态，配合
aria-expanded更规范
移动端汉堡菜单的 HTML 结构怎么写
结构必须保证 <input> 在 <label></label> 和 <ul></ul> 之前，才能用 ~ 选择器控制后续元素。不要把 checkbox 放在 ul 里面或后面。
<nav class="nav">
<input type="checkbox" id="nav-toggle">
<label for="nav-toggle" class="hamburger">☰</label>
<ul class="nav-list">
<li><a href="/">首页</a></li>
<li><a href="/products">产品</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
-
for="nav-toggle"必须与id完全一致，否则点击 label 不会触发 checkbox - label 内容可以是 Unicode 字符（如
☰），也可以是 SVG 图标，但需确保点击区域 ≥ 44px - ul 默认设
max-height: 0; overflow: hidden;，:checked ~ .nav-list设为max-height: 300px（值要略大于所有 li 总高，否则动画截断）
@media 断点设多少才合理
别迷信 480px 或 320px。现代设备中，iPhone 13/14 横屏是 568px，iPad mini 是 744px，折叠屏展开后常超 800px。768px 是最稳妥的断点，它覆盖绝大多数平板竖屏和小尺寸桌面屏，同时留出足够空间让菜单垂直排列不拥挤。
立即学习“前端免费学习笔记（深入）”；
- 桌面端规则写在
@media (min-width: 769px)，避免与移动端样式冲突 - 移动端默认样式（无媒体查询包裹）就是小屏逻辑，这样即使媒体查询失效，基础功能仍可用
- 如果项目需适配横屏手机，可加第二断点：
@media (min-width: 576px) and (max-width: 768px)微调 padding 或 font-size
Flexbox 对齐时 margin-left: auto 为什么只对登录项生效
桌面端右对齐“登录”“注册”这类操作项，靠的是 Flexbox 流式布局的天然特性：margin-left: auto 会让它前面的所有 flex item 被挤到左侧，自身独占剩余空间。但这个技巧只适用于同级元素，不能嵌套使用。
- 错误写法：
<li class="logo">LOGO</li> <li style="margin-left: auto">登录</li>—— 正确 - 错误写法：
<li class="logo" style="margin: auto">LOGO</li>—— 会破坏顺序，logo 居中后其他项无法自动左对齐 - 若 logo 需居中，整个
<ul></ul>设justify-content: space-between，再把 logo 单独设margin: 0 auto会失效；应改用text-align: center配合flex: 1的中间容器
真正容易被忽略的是触屏点击区域和过渡动画的耦合：用 max-height 实现展开动画时，如果总高度估算不准，动画会突兀中断；而用 visibility + opacity 虽然安全，却无法实现“从上往下展开”的视觉反馈。这两个细节没调好，用户第一眼就会觉得菜单“卡”或“假”。
