窄屏下导航栏不自动折叠，先确认媒体查询断点是否生效；常见原因是@media(max-width:768px)未触发或被高优先级样式覆盖，应默认写移动端折叠态，再用min-width恢复桌面布局。
窄屏下导航栏不自动折叠？先确认媒体查询断点是否生效
很多情况是导航在手机上看还是横排，根本没折叠——不是 JS 没写对，而是 CSS 媒体查询压根没触发。关键看两点：@media (max-width: 768px) 这类规则是否写在正确位置，以及是否被更高优先级样式覆盖。
常见错误：把 @media (max-width: 768px) 写在 CSS 文件末尾，但前面有全局 .nav-menu { display: flex; }，导致小屏下依然强制显示。更稳妥的做法是默认写移动端样式（折叠态），再用 @media (min-width: 769px) 恢复桌面布局。
- 断点值建议用
768px或992px，避免600px——iPhone 12 竖屏宽 390px，Pixel 4 是 360px，600px 会误判为桌面 - 别在媒体查询里重写整套导航样式，只覆盖必要属性：比如
flex-direction: column、display: none、position: absolute - 用浏览器开发者工具的“设备模拟”功能，勾选 “Disable cache” 并刷新，确认
matchMedia是否返回true
汉堡图标点击后菜单不展开？检查 class 切换与 CSS 对应关系
JS 里执行了 menu.classList.toggle("active")，但菜单还是黑屏或没反应——大概率是 CSS 里没定义 .nav-menu.active，或者用了错误的显示方式。
display: none → display: block 无法做过渡动画，且会触发重排；直接切 visibility 或 max-height 更稳。
立即学习“前端免费学习笔记（深入）”；
- 确保 HTML 中菜单容器有明确 class，比如
<ul id="nav-menu" class="nav-menu"> - CSS 必须匹配：不能写
.nav-menu.show却在 JS 里切"active" - 推荐用
max-height过渡：.nav-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }→.nav-menu.active { max-height: 500px; } - 别用
height: auto做过渡目标值——浏览器无法计算它的像素值，动画会失效
用 <input type="checkbox"> 实现纯 CSS 折叠时，DOM 顺序不能错
想省掉 JS？可以，但 <input> 必须在 <label> 和 <ul> 之前，否则 :checked ~ .nav-menu 选择器完全无效。
典型结构必须是：<input id="nav-toggle" type="checkbox"><label for="nav-toggle">☰</label><ul class="nav-menu">...</ul>。任何顺序调整都会让点击失灵。
-
<label><input type="checkbox">☰</label>也行（隐式关联），但<label for="xxx">☰</label><input id="xxx">不行——~选不到后面的兄弟元素 -
.nav-menu不能设display: none，否则父容器高度塌陷，页面内容上跳；改用visibility: hidden+opacity: 0+max-height: 0 - iOS Safari 有时点击后焦点卡在
<input>上，导致连续点击失效；加一句input:focus { outline: none; }能缓解
折叠菜单展开后内容错位或溢出？重点查 flex 与 overflow 组合
菜单弹出来，文字挤成一团、图标跑出边界、甚至整个导航栏被撑高——问题常出在 flex 布局和溢出控制没配对。
侧边栏或顶部导航若用了 display: flex，单纯改 width 很可能被 flex-basis 覆盖；而没加 overflow: hidden 就算缩窄了宽度，内容照样露在外面。
- 折叠态侧边栏必须同时设：
width: 60px、min-width: 0、overflow: hidden - 主内容区跟随变化时，别用
flex: 1，改用margin-left: 240px→.sidebar.collapsed ~ .main-content { margin-left: 60px; } - 如果导航项里有
white-space: nowrap，小屏下必须重置为white-space: normal，否则文字不换行直接撑破容器 - 按钮触控区域小于 44×44px 时，在 iOS 上点击容易失效，给
.nav-toggle加padding: 0.5rem或min-height: 44px
visibility: hidden 隐藏菜单，对视障用户就不可见了；而用 aria-expanded 手动同步状态又常被漏掉。这不是“能不能用”的问题，而是“用了但没配齐”的坑。 
