合理断点应基于菜单内容宽度而非固定值，如5项×60px加间距超320px即折叠；flex布局需设flex-wrap:wrap或小屏改column，并清除ul默认内外边距；CSS折叠菜单用checkbox+transition实现，点击链接不自动收起属正常限制。
媒体查询断点怎么设才合理
响应式导航栏的断点不是随便写的，得看菜单项数量和文字长度。小屏下如果所有菜单挤在一行会换行或溢出，这时候就要触发折叠。常见做法是用 max-width: 768px 作为移动设备分界，但更稳妥的是基于内容定断点：比如菜单共 5 项、每项平均 60px 宽，加上间距，总宽超 320px 就该收起来了。可以先在浏览器里调缩放，观察菜单开始错位的位置，再把这个宽度写进 @media。
flex 布局中 justify-content 和 flex-wrap 怎么配合
导航栏用 display: flex 是基础，但关键在细节控制：
-
justify-content: space-between适合 logo 左对齐、菜单右对齐；若要居中，改用justify-content: center，但注意小屏时可能被截断 - 默认
flex-wrap: nowrap，菜单项强行挤在一行——这是移动端溢出的元凶；必须加flex-wrap: wrap或（更推荐）在小屏下改用flex-direction: column配合隐藏菜单 - 别忘了给
nav ul设margin: 0和padding: 0，否则 flex 对齐会被默认列表样式干扰
折叠菜单按钮点击后如何显示隐藏的 nav 列表
纯 CSS 实现折叠菜单，核心是靠 input[type="checkbox"] + :checked + 相邻兄弟选择器，避免 JS 依赖：
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle">☰</label>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
#menu-toggle:checked ~ nav ul {
max-height: 300px;
opacity: 1;
visibility: visible;
}
nav ul {
max-height: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease;
}
注意：不能只靠 display: none 切换，那样没有过渡动画；max-height 需设一个足够容纳所有菜单项的值，太小会裁剪，太大动画拖沓。
立即学习“前端免费学习笔记（深入）”；
移动端菜单展开后点击链接不自动收起？
这是纯 CSS 方案的硬伤：没有事件监听，无法在点击后取消 :checked 状态。解决办法只有两个：
- 接受这个限制，把“收起”逻辑交给用户再点一次按钮（最简单，也最符合无障碍预期）
- 加极简 JS，监听
a标签点击，然后document.getElementById('menu-toggle').checked = false - 别用
:focus或:hover模拟，它们在触摸设备上不可靠，且失去焦点行为难以预测
真要兼顾体验和简洁，就别强求“点链接自动收起”，优先保证可访问性和 CSS 可维护性。
