纯 CSS 实现响应式导航菜单完全可行，关键在 checkbox 状态联动与媒体查询配合，但必须确保 input 与 .nav-menu 同级且 input 在前、用 max-height 过渡替代 display、设置正确视口声明和足够触控热区，任一细节缺失都会导致失效。
纯 CSS 实现响应式导航菜单完全可行，关键在 input[type="checkbox"] 状态联动 + 媒体查询断点控制，但必须严格遵循 DOM 顺序和样式约束，否则 :checked ~ .nav-menu 选择器根本不会触发。
为什么 :checked ~ .nav-menu 不生效
这是最常卡住的一步。CSS 属性选择器依赖兄弟关系（~ 是通用兄弟选择器），所以 HTML 中 <input> 必须出现在 <nav class="nav-menu"></nav> 之前，且二者同级、无嵌套。
-
<input id="nav-toggle" type="checkbox">必须放在<label for="nav-toggle"></label>和<nav class="nav-menu"></nav>的共同父容器内，且是第一个子元素 - 如果把
<input>套在<div> 里，或插在 <code><nav></nav>内部，:checked ~ .nav-menu就查不到目标 - 移动端媒体查询中，
.nav-menu初始状态不能只靠display: none隐藏 —— 过渡动画需要max-height: 0+overflow: hidden才能平滑展开 - 正确写法：
@media (max-width: 768px) { .nav-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } } - 展开时需给足够余量：
input[type="checkbox"]:checked ~ .nav-menu { max-height: 300px; }（300px 要略大于所有菜单项总高度，设小了动画会突然截断） - 桌面端必须显式重置：
@media (min-width: 769px) { .nav-menu { max-height: unset; overflow: visible; } }，否则大屏下折叠逻辑残留 -
<label></label>的for属性值必须和<input id>完全一致，大小写、连字符都不能错 - 标签本身没有可点击区域：iPhone SE 等小屏设备要求触控热区 ≥ 44×44px，仅靠图标尺寸不够，得用
padding补足 - 若用
<a href="#"></a>或<button type="submit"></button>代替<label></label>，会触发页面跳转或表单提交，导致菜单闪一下就消失 —— 必须加event.preventDefault()或换回<label></label> - 没加视口声明：
<meta name="viewport" content="width=device-width, initial-scale=1">缺失时，iPhone 上媒体查询可能完全不触发 - 优先用相对单位：
@media (max-width: 48em)（即 768px / 16 = 48em），更适配不同根字体大小 - 对超小屏（如 iPhone SE 第一代，逻辑宽 320px），可加兜底：
@media (max-width: 320px) - 如果菜单内容动态变化（比如有搜索框、用户头像），建议用内容驱动断点：
@media (max-width: calc(100vw - 2rem))，比固定值更鲁棒
@media (max-width: 768px) 下的 display 与 transition 配合要点
小屏下隐藏菜单不是“设成 display: none”就完事，那样会导致过渡动画失效；也不是“只设 visibility: hidden”，它仍占布局空间，点击区域错位。
汉堡按钮点击无反应的常见原因
表面是 JS 没绑事件，但纯 CSS 方案里，问题几乎全出在 HTML 结构或默认行为上。
立即学习“前端免费学习笔记（深入）”；
断点值该设多少才可靠
别迷信“768px 通用断点”。实际设备逻辑分辨率差异极大，硬写像素值容易在高 DPR 设备（如 iPhone 12+）上失效。
真正难的不是写对那几行 CSS，而是确保 <input> 在 DOM 里站对位置、max-height 估准高度、label 热区够大、视口声明存在——这些细节漏掉任何一环，整个纯 CSS 导航就静默失效。
