flex菜单小屏不收缩的主因是未在媒体查询中重置flex-direction为column；需配合flex-wrap: wrap（仅row有效）、避免伪类触发、用JS重置checkbox状态、优先min-width断点、禁用height过渡而改用transform scaleY动画，并确保viewport width与断点匹配。
flex菜单在小屏下不收缩？检查flex-direction和flex-wrap是否被覆盖
很多情况下，菜单在移动端没变成竖排，不是flex没生效，而是父容器的flex-direction: row在媒体查询里没重置。默认flex-direction是row，小屏要切为column才能堆叠；如果菜单项多还想换行，得加flex-wrap: wrap，但注意它只对row有效，column下wrap基本无效。
- 务必在
@media (max-width: 768px)里显式写flex-direction: column - 避免用
display: flex直接写在:hover或:focus上——这些伪类在触屏设备上不可靠 - 如果菜单有图标+文字组合，小屏下建议用
align-items: flex-start统一左对齐，否则center会导致文字截断
点击菜单项后页面跳转，但移动端“汉堡按钮”没关闭？别依赖:checked模拟状态
纯CSS方案常用input[type="checkbox"] + label + .menu结构，靠:checked控制max-height或opacity。问题在于：点击菜单项触发a跳转时，页面刷新，checkbox状态丢失，按钮图标还留在“已展开”态。这不是CSS能解决的，必须用JS重置输入框状态。
- 跳转前监听
click事件，在a上加onclick="document.getElementById('menu-toggle').checked = false" - 更稳妥的做法是把
checkbox换成button+aria-expanded，用JS控制display或transform切换，兼容性更好 - 别用
visibility: hidden隐藏菜单——它仍占布局空间，小屏下会把内容顶下去
用@media切布局时，为什么min-width比max-width更可靠？
桌面优先写法习惯用@media (max-width: 768px)，但实际调试中常发现某些安卓浏览器或缩放后的Chrome把768px判定为“大于768”，导致断点失效。根源是设备像素比（dpr）和视口缩放干扰了max-width计算。用min-width从大往小适配，逻辑更稳定。
- 推荐写法：
@media (min-width: 769px) { /* 桌面样式 */ }，然后默认写移动端样式（无媒体查询） - 所有断点值统一用
em单位，比如@media (min-width: 48em)，避免px在高DPR屏下失准 - 不要在同一个媒体查询里混用
min-和max-，容易产生边界重叠或遗漏（比如768px刚好卡在中间）
菜单动画卡顿？避开height和opacity做过渡
height: 0 → auto不能加transition，浏览器无法插值；opacity虽可过渡，但全透明元素仍响应点击。真正流畅的方案是用transform: scaleY()配合overflow: hidden，它触发GPU加速且不影响交互。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
transform: scaleY(0); transform-origin: top; transition: transform 0.2s ease-in-out;，展开时设为scaleY(1) - 必须加
overflow: hidden在父容器上，否则缩放时内容会溢出 - 别给
flex子项单独加transition，整个菜单容器过渡一次就够了，否则多个子项逐个动画会显得拖沓
事情说清了就结束。最常被忽略的是：媒体查询断点值和viewport meta 标签的width属性必须匹配，否则@media根本不会触发。
