响应式导航栏小屏不折叠的主因是媒体查询断点错误或flex-direction未生效；需确保max-width断点匹配设备、菜单容器设flex-direction:column且display:flex，checkbox联动逻辑正确，z-index配合position闭环。
响应式导航栏在小屏幕下不折叠？检查 @media 断点和 flex-direction 是否覆盖到位
常见现象是桌面端正常，但手机打开后菜单项仍横向铺开、溢出屏幕，或汉堡按钮点击无反应。根本原因常是媒体查询没生效，或 flex-direction: column 没正确作用于菜单容器。
- 确保媒体查询断点与目标设备匹配，比如用
@media (max-width: 768px)覆盖平板及以下，别写成min-width写反了 - 折叠时菜单容器（如
.nav-menu）必须设flex-direction: column，且display: flex不能被子元素的float或position: absolute破坏 - 如果用了
display: none隐藏桌面菜单，记得在小屏下显式设为display: flex，否则 flex 布局不会触发
汉堡菜单点击没反应？重点查 input[type="checkbox"] + :checked 的联动逻辑
纯 CSS 实现折叠菜单时，依赖隐藏 checkbox 控制显隐，最容易卡在选择器失效或 HTML 结构错位。
-
label[for="menu-toggle"]的for值必须与input#menu-toggle的id完全一致，大小写和连字符都不能错 -
input必须在.nav-menu兄弟位置（同级），且:checked ~ .nav-menu这类相邻兄弟选择器才有效；若中间插了其他元素，就断链了 - 避免给
input设display: none后又忘了加position: absolute; left: -9999px——部分旧版 Safari 对display: none的:checked支持不稳定
flex-wrap: wrap 在中等屏幕下表现奇怪？优先用固定断点而非依赖内容换行
有人想让导航栏在宽度不足时自动折行，于是对 .nav-list 设 flex-wrap: wrap，结果在 900px–1024px 区间菜单忽高忽低、对齐错乱。
-
flex-wrap是“内容驱动”的，受字体、padding、图标尺寸影响大，难以精确控制折行时机 - 更可靠的做法是：在明确断点（如
@media (max-width: 960px)）直接切到单列布局，而不是依赖 wrap - 如果真要用
wrap，给每个nav-item设flex: 0 0 auto，避免flex: 1拉伸导致换行判断失准
移动端菜单展开后遮不住背景？z-index 和 position 的组合必须闭环
菜单弹出后被轮播图、固定头部或 iframe 盖住，不是单纯调高 z-index 就能解决。
立即学习“前端免费学习笔记（深入）”；
- 确保菜单容器有
position: relative或position: absolute，否则z-index无效 - 检查父容器是否设置了
overflow: hidden或transform（如transform: translateZ(0)），这两者会创建新层叠上下文，把子元素的z-index锁死在内部 - 推荐方案：给
.nav-menu设position: fixed; top: 0; left: 0; width: 100%; height: 100vh;，再配z-index: 1000，比absolute更少受父级干扰
opacity: 0.99 或 will-change: transform 就可能让整个菜单层级失效。先关掉所有动画和半透明效果，确认基础层叠正常，再逐步加回来。 
