必须添加viewport meta标签，否则@media断点不生效；避免混用display:none与visibility:hidden导致点击失灵；小屏flex布局需设flex-wrap:nowrap并防压缩；max-height或transform替代display实现菜单过渡动画。
导航栏在小屏上直接消失？检查 @media 断点值是否匹配设备宽度
很多人写完 @media (max-width: 768px) 发现手机上导航还是不折叠，其实不是代码没生效，而是当前设备的视口宽度根本没进这个范围。移动端浏览器默认视口（viewport）可能宽达 980px，导致 768px 断点完全不触发。
- 必须在
中加<meta name="viewport" content="width=device-width, initial-scale=1">，否则媒体查询基本失效 - 断点别硬套“常见值”，用浏览器开发者工具的设备模拟器看真实
screen.width和innerWidth，再定@media条件 -
max-width是基于视口宽度判断，不是屏幕物理像素，更不是 CSS 像素缩放后的值
点击菜单按钮没反应？display: none 和 visibility: hidden 混用导致 DOM 不可交互
折叠后用 display: none 隐藏导航菜单是常规操作，但若同时又给按钮加了 visibility: hidden 或父容器设了 pointer-events: none，就会让点击事件彻底失灵。
- 折叠状态只对菜单容器用
display: none，按钮本身必须保持display: block且可点击 - 不要用
opacity: 0+pointer-events: none控制显隐——它会让按钮无法触发任何事件，包括click - JavaScript 切换类名时，确保目标元素有明确的显示/隐藏 class，比如
.nav-menu.is-open对应display: flex，其余状态就是display: none
用 flexbox 布局导航项，但小屏下换行错乱？注意 flex-wrap 和 flex-direction 的优先级
桌面端用 display: flex 排横向导航很顺，但切到小屏后如果只改 flex-direction: column，却忘了关掉 flex-wrap: wrap，可能出现子项被强行压缩、文字折行、高度异常等问题。
- 小屏折叠菜单时，建议把导航容器设为
flex-direction: column+flex-wrap: nowrap，避免意外换行 - 每个导航项（
<a></a>或<li>）加上flex-shrink: 0，防止被 flex 压缩导致文字截断 - 如果用
justify-content: space-between做两端对齐，小屏下会拉大垂直间距，换成flex-direction: column后建议改用gap: 0.5rem控制间距更可控
动画展开菜单卡顿？别在 display 上加 transition
display 是 CSS 中的离散属性，不能过渡。写 transition: display 0.3s 看似写了，实际完全无效，结果就是菜单“啪”一下弹出来，毫无动画感。
立即学习“前端免费学习笔记（深入）”；
- 要用
max-height过渡：初始设max-height: 0+overflow: hidden，展开时设一个足够大的值（如max-height: 500px），配合transition: max-height 0.3s ease-in-out - 或者用
transform: scaleY(0)→scaleY(1)，性能更好，但需注意子元素要加transform-origin: top - 避免对
height做 transition，因为高度具体值难预估，容易动画中途跳变
响应式导航真正难的不是写几行媒体查询，而是理解视口、布局流、渲染层和事件捕获之间的咬合点。漏掉任何一个，都会让“看起来没问题”的代码在真机上突然罢工。
