响应式导航菜单怎么用媒体查询控制显隐
小屏幕下把导航收起来、点按钮才展开，核心就是用 @media 切换 display 或 visibility，但直接设 display: none 会断开可访问性连接，也影响动画过渡——得用更稳妥的方式。
- 优先用
max-width而不是min-width做断点，比如@media (max-width: 768px)，这样移动优先、逻辑更直觉 - 别对导航容器本身设
display: none，改用height: 0+overflow: hidden配合transition，否则 CSS 动画无法在display变化时生效 - 移动端展开状态建议加
position: absolute或position: fixed，避免撑开页面布局；同时记得设top: 100%或top: 0明确定位基准
汉堡按钮点击后菜单不出现？检查这些关键点
常见现象是点了没反应，或菜单闪一下就消失——大概率不是 JS 问题，而是 CSS 层叠或定位失效导致的视觉“丢失”。
- 确保汉堡按钮的
z-index高于导航菜单，否则菜单可能被盖在下面；移动端尤其要注意header或nav的z-index是否意外设为负值 - 如果用了
transform: translateY(-100%)隐藏菜单，展开时必须配合transform: translateY(0)，不能只靠display切换，否则过渡无效 - 检查是否忘了给菜单加
opacity: 0+pointer-events: none的隐藏组合，否则即使看不见，仍会拦截点击事件，导致后续交互异常
用 visibility 还是 display 控制菜单？
visibility: hidden 保留文档流占位，display: none 完全脱离流——但响应式菜单里，两者都不该单独用。
- 纯
display: none会让屏幕阅读器跳过整个菜单，无障碍支持断裂；加上aria-hidden="true"才算补救，但不如结构化处理 - 纯
visibility: hidden仍响应鼠标事件，且无法触发transition（因为不触发重排），动画会卡顿或失效 - 推荐组合：
opacity: 0+visibility: hidden+height: 0+overflow: hidden，展开时全部反向设置，并统一加transition: all 0.3s ease
移动端菜单展开后滚动页面，菜单跟着动？
这是 position: absolute 没配好父容器定位上下文导致的。绝对定位元素会相对于最近的「已定位祖先」找参考点，而默认情况下，body 或 html 没设 position: relative，它就会往上一直找到根节点，结果菜单锚定在视口左上角。
- 给菜单的直接父容器（比如
nav或header）加上position: relative - 若菜单需要覆盖全屏（如侧滑菜单），改用
position: fixed并配top: 0、left: 0，这样不受滚动影响 - 注意
fixed元素在 iOS Safari 中可能有输入框聚焦时的 viewport 缩放 bug，需加viewportmeta 的user-scalable=no或监听focus动态调整
事情说清了就结束。最常被忽略的是：菜单的 aria-expanded 和 aria-hidden 必须和 CSS 状态严格同步，否则对屏幕阅读器用户来说，菜单永远“不存在”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
