纯CSS移动端汉堡菜单唯一可行方案是input[type="checkbox"]+ :checked伪类驱动；需严格满足DOM顺序、隐藏方式、max-height动画及媒体查询显式控制等七项规范。
纯 CSS 能做移动端汉堡菜单，但必须用 input[type="checkbox"] + :checked 伪类驱动，否则无法响应点击——这是唯一不依赖 JS、兼容 IE9+ 的方案。
结构必须满足兄弟选择器匹配规则
HTML 中 input 必须在 DOM 顺序上严格位于 label 和菜单容器之前，且三者同级。任何嵌套、换行或空格都会导致 ~ 或 + 选择器失效。
-
input不能用display: none隐藏（旧版 Safari 会跳过状态），改用position: absolute; opacity: 0; pointer-events: none -
label必须有for="xxx"，且值与input的id完全一致 - 菜单容器如
.menu必须写成input#nav-toggle:checked ~ .menu可命中的形式，不能嵌套在label内或跨父容器
动画只能靠 max-height，height: auto 不过渡
直接写 height: 0 → height: auto 在 CSS 过渡中无效，浏览器无法插值。唯一可靠方案是控制 max-height。
- 关闭态：
max-height: 0; overflow: hidden - 展开态：
max-height: 300px（设一个明显大于最大内容的高度，别用9999px，iOS 滚动会卡） - 过渡加在
max-height上：transition: max-height 0.3s ease-in-out - 若菜单含下拉项，子菜单也得用
max-height控制，否则动画断层
媒体查询里必须显式隐藏，默认样式不能留白
只写 @media (max-width: 768px) 但没给菜单设初始 display: none，小屏下菜单仍占布局流，可能压住按钮或错位。
立即学习“前端免费学习笔记（深入）”；
- 菜单容器（如
.menu）在默认样式（非媒体查询内）就要设display: none - 在
@media (max-width: 768px)里才改为display: block或flex - 千万别用
visibility: hidden替代——它仍占空间，背后元素点不到 - 汉堡按钮本身要在桌面端隐藏：
@media (min-width: 769px) { .navbar-toggler { display: none; } }
真正容易被忽略的是：DOM 中 input 前不能有注释或空白文本节点；max-height 的上限值如果估小了，图片或字体加载延迟会导致内容被截断——加 padding-bottom: 1px 可触发重排微调。
