响应式导航栏可不用JavaScript，核心是用<input type="checkbox">的:checked伪类配合兄弟/相邻选择器控制显隐；需设position: relative于下拉父级<li>、禁用flex-shrink、用max-width断点及gap替代固定padding。
不用 JavaScript 也能做响应式导航栏，但「移动端点击展开」必须用 <input type="checkbox"> 模拟开关状态——否则点一下就跳转、没反应，或只在部分浏览器生效，这是最常卡住人的地方。
为什么不能直接用 <button> 或 onclick 控制显隐
纯 CSS 实现折叠/展开，核心是靠表单控件的“状态可被 CSS 选择器捕获”这一特性。<button> 或 <div> 没有原生 checked 状态，CSS 无法监听；而 <input type="checkbox"> 的 :checked 伪类能被 ~（兄弟选择器）或 +（相邻选择器）精准触发样式切换，零 JS 即可驱动菜单显隐。
- IE9+ 全面支持
:checked+~，无需 polyfill - 避免用
href="#"：点完页面滚顶，且语义错误；空链接建议直接移除href，加role="button"补无障碍 - 别给 checkbox 设
display: none后用 JS 操作——它就失效了；应配合opacity: 0; position: absolute;隐藏但保留可交互性
position: absolute 下拉菜单总偏移？先查父容器有没有 position: relative
下拉项用 position: absolute 是为了脱离文档流、不撑高导航栏，但它必须相对于触发它的 <li> 定位。如果该 <li> 没设 position: relative，它就会往上找最近的已定位祖先，甚至落到 <body> 上，滚动时飘走。
- 每个含下拉的
<li>必须加position: relative - 下拉菜单用
top: 100%; left: 0;，比top: 44px更可靠——高度变化时自动对齐 - iOS Safari 中
transform+position: fixed易闪烁，改用position: sticky; top: 0;更稳
Flex 布局里导航项被压缩、换行错乱？关掉 flex-shrink 并设 flex-wrap
很多人写 nav ul { display: flex; } 就以为万事大吉，结果小屏上文字被压扁、图标错位、甚至横向溢出滚动条——问题出在默认 flex-shrink: 1 和没设 flex-wrap。
立即学习“前端免费学习笔记（深入）”；
- 每项
<a>加flex: 0 0 auto，禁止缩放，文字变长也不变形 -
nav ul必须设flex-wrap: wrap，窄屏自动折行，比强行单行更健壮 - 旧版 Safari（iOS 9–12）对
flex: 1支持差，写成flex: 1 1 auto更安全 - 别用固定
padding-left/right（如70px），改用gap: 12px，缩放时自动调节间距
媒体查询断点写 max-width 还是 min-width？优先用 max-width
移动端优先是行业事实标准，@media (max-width: 768px) 比 @media (min-width: 769px) 更少漏设备。尤其当设计稿给的是“手机态 → 平板态 → 桌面态”，从窄往宽适配逻辑更清晰，也更容易调试。
- 汉堡菜单默认
display: none，只在max-width: 768px下设为block或flex - PC 端导航项用
display: flex，移动端统一收进<ul class="mobile-menu">，结构扁平，无嵌套二级触发 - 别把
overflow: hidden加在nav或ul上——它会裁掉position: absolute的下拉菜单
真正难的不是写出能跑的代码，而是让中英文混排、翻译后字数翻倍、iOS Safari 滚动、旧版 Android 浏览器这些边界情况都不崩——所有关键点都落在 checkbox 状态控制、定位上下文、flex 缩放抑制和断点方向这四件事上，少一个，上线后就是深夜报警。
