结论：用 @media (min-width: 768px) 控制桌面端显示、移动端默认隐藏+checkbox触发展开最稳；必须加 viewport meta 标签，断点单位不能漏 px，避免用 a 或 submit 按钮触发跳转，max-height 过渡需设足够值，且移动端样式应写在媒体查询外作为默认。
直接说结论：用 @media (min-width: 768px) 控制桌面端显示，移动端默认隐藏 + checkbox 触发展开最稳；别信“写了 @media 就自动适配”，漏了 <meta name="viewport"> 或断点单位写错，导航栏在 iPhone 上照样不响应。
为什么导航栏在手机上点不开或一闪就消失
常见现象是点击汉堡图标后菜单没弹出、弹出瞬间又收起，或横屏时布局错乱。根本原因不是 CSS 写得不够多，而是基础链路断了：
- HTML 缺
<meta name="viewport" content="width=device-width, initial-scale=1.0">—— 浏览器按桌面视口渲染，@media (max-width: 768px)根本不触发 - 写了
@media (max-width: 768)却漏掉px单位，规则被浏览器忽略 - 触发按钮是
<a href="#"></a>或<button type="submit"></button>，点击后页面跳转或表单提交，强制刷新 - 用
visibility: hidden隐藏菜单，它仍占文档流，导致点击区域偏移、动画卡顿
@media 断点设多少才真有用
别抄网上“480px / 768px / 1024px”三件套。2026 年真实设备中，iPhone 14 Pro 横屏视口宽度是 568px，iPad Air（第 5 代）竖屏是 744px，折叠屏展开后常超 800px。硬套 768px 会切不准。
- 稳妥起点是
@media (min-width: 769px)：覆盖 iPad 竖屏 + 小尺寸桌面屏，且避免与移动端默认样式冲突 - 如需适配横屏手机，加一层
@media (min-width: 576px) and (max-width: 768px)微调字体和 padding - 断点必须依内容而定：当导航文字开始换行、按钮间距过紧、图标被截断时，才是该加断点的信号，不是看设备型号
纯 CSS 实现展开/收起的关键细节
用 <input type="checkbox" id="nav-toggle"> 替代 JS 是为了规避 JS 失效场景，但 HTML 结构和 CSS 属性必须严丝合缝：
-
<input>必须放在<label for="nav-toggle"></label>和<nav class="nav-list"></nav>之前，否则:checked ~ .nav-list选择器不生效 -
.nav-list初始状态设max-height: 0; overflow: hidden;，不能只靠display: none，否则过渡动画失效 -
:checked ~ .nav-list中的max-height值要略大于所有<li>总高度（比如设成300px），设小了动画会突然截断 -
label的点击区域至少 44×44px，用padding补足，别依赖图标本身大小
移动端优先写法里最容易漏的一环
很多人写了 @media (min-width: 769px) 给桌面端加样式，却忘了移动端逻辑要写在媒体查询**外面**——也就是默认样式区。这意味着：
- 导航栏默认是垂直堆叠、
display: block、字号较小、无 hover 效果 - 所有
@media规则都是“增强”，不是“重写”；如果媒体查询加载失败（比如 CDN 抽风），页面至少还能用 - 千万别把
@media塞进<style></style>标签或行内 style 里——内联样式的优先级高于媒体查询，规则直接被覆盖
复杂点在于：max-height 过渡无法精确匹配动态内容高度，所以实际项目中若导航项数量不确定，还是得用 JS 测高再设值；纯 CSS 方案只适合固定项数或高度可控的场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
