小屏幕导航菜单不显示或点击无反应的常见原因包括：未设置默认 display: none、JS 未正确切换类名、使用 visibility: hidden 占位、表单默认行为触发刷新、事件重复绑定、视口声明缺失、断点单位不当及层叠上下文混乱。
导航菜单在小屏幕不显示，点击按钮也没反应
常见原因是 CSS 里没给 .nav-menu 设置初始 display: none，或者 JavaScript 没正确切换类名。移动端默认隐藏、点击展开是基本逻辑，但很多人只写了 display: block 却忘了先隐藏它。
- 确保默认状态用媒体查询包裹：
@media (max-width: 768px) { .nav-menu { display: none; } } - JS 切换时别直接操作
style.display，改用classList.toggle('active')配合 CSS 规则更可靠 - 如果用
visibility: hidden替代display: none，菜单仍占布局空间，点击区域可能错位
点击按钮后菜单闪一下就消失
这是典型的表单提交或链接跳转触发了页面刷新，尤其当触发按钮是 或 时。浏览器执行了默认行为，导致刚展开的菜单瞬间重置。
- 给按钮加
type="button"（如果是） - 如果是
标签，必须在 JS 中调用event.preventDefault() - 检查是否意外绑定了多次点击事件，用
console.log确认触发次数
媒体查询断点设成 768px，但 iPhone SE 还是不生效
因为设备像素比和视口缩放会让 CSS 像素和物理像素不一致。单纯依赖固定宽度断点，在高 DPR 设备上容易失效。
- 必须在 HTML
中加入视口声明： - 断点建议用
em或相对单位，比如@media (max-width: 48em)（对应 768px / 16 = 48em） - iPhone SE（第一代）逻辑分辨率是 320px，用
max-width: 320px断点反而更稳妥，别迷信“通用 768”
菜单展开后滚动页面，背景内容被遮挡或错位
本质是层叠上下文（stacking context）混乱。导航菜单常被设为 position: fixed，但父容器或兄弟元素有 transform、opacity 、will-change 等属性时，会意外创建新的 stacking context，导致 z-index 失效。
- 给菜单加明确的
z-index: 1000，同时确认其父级没有transform: translateZ(0)类似 hack - 避免对
或设置overflow: hidden来锁滚动——这在 iOS Safari 上会导致页面整体回弹异常 - 真要锁滚动，改用
body { position: fixed; top: -${window.scrollY}px; width: 100%; }并记录 scrollY
事情说清了就结束。响应式导航不是写完 media query 就完事，设备差异、默认行为、层叠规则，三者漏一个，菜单就可能不按你想的来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
