用 max-height + overflow: hidden + transition 实现折叠动画更平滑兼容，因 height: auto 无法插值导致跳变；需设足够但不过大的 max-height 值（如 260px），配 overflow: hidden；媒体查询推荐 min-width 且只覆盖关键样式；JS 切换时注意 body 滚动、触控区域和 focus 状态。
直接用 max-height + overflow: hidden + transition 实现折叠动画，比切 display 更平滑、兼容性更好，也更容易控制过渡节奏。
为什么不能用 height: auto 做过渡
浏览器无法对 height: auto 进行动画插值——它不是确定数值，transition 会直接跳变。常见错误是写成：
.nav-menu { transition: height 0.3s; }
.nav-menu.open { height: auto; }
结果就是：收起时瞬间消失，展开时无动画。必须换思路。
-
max-height是可动画的数值属性，设为0和一个足够大的固定值（如300px），就能触发渐变效果 - 这个“足够大”的值要略大于菜单实际高度；5 个项 × 48px ≈ 240px，设
max-height: 260px比设9999px更自然 - 必须配
overflow: hidden，否则内容会在过渡过程中溢出
@media 断点该写 min-width 还是 max-width
推荐统一用 @media (min-width: 768px) 控制桌面端样式，而不是反着写 @media (max-width: 767px)。原因很实际：
立即学习“前端免费学习笔记（深入）”；
- 旧版 Safari 和部分安卓 WebView 在解析
max-width媒体查询时可能触发两次重排，导致布局抖动 - 把桌面端逻辑放在媒体查询里，意味着默认样式是移动端（折叠态），更符合渐进增强逻辑
- 断点值选
768px（平板竖屏）比600px更稳妥——Pixel 4、iPhone 12 等设备宽度接近 390–414px，不会误判为桌面 - 别在媒体查询里重复整套导航 CSS，只覆盖关键属性：
flex-direction、display、margin-left: auto就够了
JavaScript 切换类名时容易漏掉的细节
用 classList.toggle('open') 看似简单，但几个边界情况常被忽略：
- 菜单展开时，记得同步设置
document.body.style.overflow = 'hidden'防止背景滚动；关闭时必须设回空字符串''，而不是'auto'，否则 iOS 可能强制重绘并卡顿 - 汉堡按钮触控区域至少
44px × 44px，小屏下用padding扩展，别只靠字体大小撑空间 - 避免在
click事件里调用event.preventDefault()——它会干掉按钮的焦点状态，影响键盘用户和屏幕阅读器 - 如果用了
position: fixed的菜单层，加touch-action: none，否则某些安卓机型拖拽时底层页面仍会滚动
真正难的不是写出第一版折叠菜单，而是让 max-height 值刚好够用、@media 不在 Safari 失效、JS 切换时不锁死滚动——这些地方没调试到位，用户一上手就卡住。
