纯css能实现真正可用的响应式导航菜单，关键在于避免display:none+transition陷阱，改用max-height+overflow:hidden模拟折叠，并确保checkbox、label、nav在dom中同级且顺序正确，同时补足触控热区、校验for/id匹配、添加viewport声明。
纯 CSS 能做出真正可用的响应式导航菜单，但必须绕开 display: none + transition 这个经典坑——它根本不会动。关键不是“能不能”，而是结构、选择器和过渡属性是否匹配。
:checked ~ .nav-menu 不生效？检查 DOM 顺序和兄弟关系
这是最常卡住的一步。:checked ~ .nav-menu 依赖通用兄弟选择器（~），意味着：<input> 必须和 .nav-menu 同级、且出现在它前面，中间不能嵌套任何父容器。
-
<input id="nav-toggle" type="checkbox">必须直接放在<nav class="nav-menu"></nav>的同一父元素下，且是第一个子节点 - 如果写成
<div><input></div> <nav></nav>，选择器就查不到目标 -
label[for="nav-toggle"]的for值必须和input#id完全一致，大小写、连字符一个都不能错
小屏下菜单展开动画失效？别用 display，改用 max-height
display 属性无法参与 CSS 过渡，设成 display: none 再切回 flex，动画会直接跳变。正确做法是用 max-height + overflow: hidden 模拟折叠。
- 小屏初始状态：
.nav-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } - 展开时：
:checked ~ .nav-menu { max-height: 300px; }（这个值要略大于所有菜单项总高度，设小了会突然截断） - 桌面端必须重置：
@media (min-width: 769px) { .nav-menu { max-height: unset; overflow: visible; } }，否则大屏下残留折叠逻辑
汉堡按钮点不动？热区、默认行为和视口声明全要验
表面是“没反应”，实际几乎全是 HTML 或基础配置问题，和 JS 无关。
- iPhone SE 等小屏设备要求触控热区 ≥ 44×44px，仅靠图标尺寸不够，得用
padding补足 - 别用
<button></button>或<a href="#"></a>代替<label></label>——前者会触发页面跳转或表单提交，导致菜单闪一下就消失 - 漏掉
<meta name="viewport" content="width=device-width, initial-scale=1">，媒体查询和点击区域都会失准
真正难的不是写几行 CSS，而是让 checkbox、label、nav 三者在 DOM 树里严丝合缝地排好队，再用 max-height 把动画“骗”出来。少一个条件，整个菜单就静音。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
