导航菜单小屏不折叠的主因是BEM修饰符未随响应式状态动态添加；应通过matchMedia监听并切换--mobile类，而非依赖CSS自动推导，且需确保父容器无高度/溢出限制。
导航菜单在小屏上不折叠？检查 BEM 修饰符是否绑定到正确的状态类
响应式导航的核心不是“怎么写 CSS”，而是“状态如何被触发并映射到类名”。BEM 修饰符（如 .nav__list--mobile）本身不带行为，它只是视觉钩子；真正决定显示/隐藏的是 JavaScript 是否动态添加或移除这个修饰符类。
- 常见错误：写了
.nav__list--mobile { display: flex; flex-direction: column; }，但 HTML 中<ul class="nav__list">始终没加上--mobile修饰符 —— 浏览器当然不会应用样式 - 正确做法：用 JS 监听
window.matchMedia('(max-width: 768px)')，当媒体查询匹配时，给.nav__list添加nav__list--mobile；不匹配时移除 - 注意：不要依赖
:is()或@container自动推导状态 —— 当前主流框架和 CMS 输出的 DOM 很少自带容器查询支持，BEM 修饰符仍是更可控的状态表达方式
为什么用 --mobile 而不是 --collapsed？语义优先于交互意图
BEM 修饰符应描述「布局角色」，而非「当前交互状态」。用 --mobile 表明这是专为移动视口设计的变体布局；而 --collapsed 暗示一种可展开/收起的动作，容易和 JS 控制的临时展开态（比如点击汉堡图标后）混淆。
- 场景差异：
--mobile在页面加载时即生效（由媒体查询驱动），属于布局级响应；--expanded是用户操作后临时叠加的类，用于控制下拉菜单显隐，二者层级不同、生命周期不同 - 参数差异：一个组件可能同时有
.nav__list--mobile.nav__list--expanded，前者管整体结构（垂直堆叠），后者管子菜单可见性（max-height过渡） - 兼容性影响：纯 CSS 媒体查询 + 静态修饰符组合，在无 JS 环境下仍能呈现基础响应式结构；若全靠 JS 切换
--collapsed，降级体验会直接丢失导航
nav__item--active 在响应式下失效？检查父容器修饰符是否覆盖了子元素样式优先级
当导航从桌面横向变为移动端垂直时，常出现激活态样式丢失 —— 不是 JS 没设置类，而是 CSS 里 .nav__list--mobile .nav__item--active 的规则被更早定义的通用规则（如 .nav__item--active）覆盖，或因嵌套层级变化导致选择器未命中。
- 典型错误：只写了
.nav__item--active { color: #007bff; }，但在--mobile下需要额外强调背景或 padding，却忘了加修饰符前缀 - 实操建议：所有依赖布局状态的样式，都应显式带上父级修饰符，例如
.nav__list--mobile .nav__item--active和.nav__list--desktop .nav__item--active分开写，避免隐式继承 - 性能提示：不要用
.nav__list--mobile .nav__item:not(:first-child)这类高成本选择器做移动端间距 —— 改用.nav__item--mobile直接修饰每个项，更稳定也更快
用 Flexbox 实现移动端菜单时，flex-direction: column 被忽略？确认父容器没有固定高度或溢出截断
即使加了 .nav__list--mobile { flex-direction: column; }，菜单项仍横排显示，大概率是父容器（如 .nav__wrapper）设置了 height: 60px 或 overflow: hidden，把 flex 子项强行压缩或裁剪了。
立即学习“前端免费学习笔记（深入）”；
- 排查路径：在 DevTools 中选中
.nav__list，看 computed 样式里flex-direction是否生效；再往上查height、max-height、overflow是否来自某个祖先元素 - 关键点：移动端菜单展开时，往往需要脱离常规文档流（比如用
position: absolute或transform: translateY），此时必须确保其容器有明确的定位上下文（position: relative）且不限制高度 - 易踩坑：用
height: 0; overflow: hidden;+transition做收起动画时，别忘了在--mobile修饰符里重置height: auto或用max-height替代，否则 flex 布局无法自然撑开
