断点应设在布局崩溃临界值往上1px，而非固定768px；动画用opacity+transform过渡，禁用display切换；菜单需正确处理visibility、z-index、aria-expanded及键盘焦点逻辑。
media query 断点设在哪才不卡顿
宽屏菜单收成汉堡包，关键不是“能不能变”，而是“什么时候变”——断点设在浏览器宽度刚好挤垮布局的临界值，而不是拍脑袋填 768px。常见错误是等导航文字开始换行、图标重叠、或出现横向滚动条才去调断点，这时视觉已经出问题了。
实操建议：
- 用浏览器开发者工具的响应式模式，拖动宽度，观察导航栏第一处文字截断或 flex 项被迫换行的位置，记下那个像素值
- 把断点设在这个值 往上 1px（比如实际崩在 924px，就用 @media (max-width: 925px)），给容器留一点呼吸空间
- 避免用设备预设值（如 sm、md），不同项目里同一类设备的实际可用宽度差异很大
transform + transition 组合为什么比 display 切换更顺
直接用 display: none / display: flex 切换汉堡菜单，动画会“跳”——因为 display 是非过渡属性，浏览器无法插值。用户看到的是突兀显隐，不是平滑收放。
实操建议：
- 用 opacity 控制透明度，配合 transform: translateY() 或 scaleY() 做进入/退出动效
- 过渡只写在菜单容器上： transition: opacity 0.3s ease, transform 0.3s ease;
- 真正隐藏时再用 display: none（比如在 transitionend 后），仅用于节省渲染开销，不参与动画过程
- 别对 height 做过渡——内容高度不确定时，height: auto 不可过渡，强行设固定值会撑破或裁切
汉堡按钮点击后菜单不展开？检查 focus 与 visibility 顺序
常见现象：点按钮没反应，控制台无报错，DOM 里菜单元素明明存在但就是不显示。大概率是 CSS 层叠顺序或初始状态冲突导致的“不可见但占位”。
实操建议：
- 检查菜单默认状态是否用了 visibility: hidden 而没配 opacity: 0 —— visibility 不触发重绘，光靠 JS 改 display 可能来不及生效
- 确保汉堡按钮的 z-index 高于菜单，否则点击事件被菜单层挡掉（尤其用 position: fixed 时）
- 如果菜单用 aria-expanded 控制，别只改属性不改样式——JS 改了 aria-expanded="true"，但 CSS 里没写 [aria-expanded="true"] { opacity: 1; transform: scaleY(1); }，照样白搭
- 在移动端，确保按钮有 cursor: pointer 和足够点击热区（至少 44px × 44px）
键盘用户打不开菜单？别漏掉 :focus-within 和 esc 键逻辑
纯靠鼠标点汉堡包没问题，但键盘用户 tab 到按钮按回车，或者弹出后按 esc 关闭，这些路径一断，菜单就变成“半残废”。这不是“锦上添花”，是基础可访问性底线。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 汉堡按钮必须是 <button>，不能用 <div> + onclick
- 用 :focus-within 捕获菜单区域获得焦点时的状态（比如聚焦到菜单内链接，自动保持展开）
- JS 中监听 keydown，对 Escape 键触发关闭，且关闭后把焦点移回汉堡按钮
- 菜单展开时，用 inert 属性或 aria-hidden="true" 把页面其他可交互元素临时“禁用”，防止键盘用户误操作到背景内容
实际调的时候，最常被忽略的是断点值和键盘流——前者让动画看起来“卡”，后者让功能在真实使用中直接失效。这两个地方不细抠，其余做得再漂亮也白搭。
