CSS实现移动端响应式导航菜单技巧

媒体查询断点设成 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 < 1、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

终于介绍完啦！小伙伴们，这篇关于《CSS实现移动端响应式导航菜单技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！