用媒体查询控制同一套HTML在不同断点下呈现不同布局，移动端用checkbox+label实现无JS汉堡菜单，桌面端通过min-width断点启用flex横向导航，避免float和布局塌陷。
怎么让汉堡菜单在桌面端自动变成横向导航栏
关键不是“切换”，而是用媒体查询控制同一套 HTML 在不同断点下呈现不同布局。很多人误以为要 JS 切换 DOM 结构，其实纯 CSS 就能搞定，且更轻量、无闪屏。
- HTML 必须保持语义化结构：用
<nav></nav>包裹<ul></ul>，所有导航项写在同一个<li>列表里，不要为移动端/桌面端准备两套 DOM - 移动端默认隐藏菜单（
display: none或visibility: hidden），用checkbox+label模拟点击展开（比 JS 更可靠，支持键盘焦点） - 桌面端断点（如
min-width: 768px）里直接取消隐藏，并把<ul></ul>设为display: flex，<li>设为display: block或inline-flex - 别用
float布局横向菜单——它会脱离文档流，导致父容器高度塌陷，响应式下容易错位
为什么 checkbox + label 是比 JS 更稳的汉堡菜单方案
因为不依赖 JavaScript 执行时机，也不怕用户禁用 JS；同时天然支持空格/回车触发，无障碍体验更好。很多项目强行用 addEventListener('click') 绑定按钮，结果在 Safari 移动端或低配安卓机上点第一次没反应——其实是事件委托没处理好或点击穿透了。
-
<input type="checkbox" id="nav-toggle">放在<nav></nav>外层或顶部，不可见但可聚焦 -
<label for="nav-toggle"></label>作为汉堡图标容器，用伪元素::before画三横线 - 菜单列表用
~或+选择器关联：比如#nav-toggle:checked ~ .nav-list控制显示 - 记得加
transition: max-height 0.3s ease-in-out配合max-height动画，别只用opacity——否则屏幕阅读器仍会读出隐藏内容
flex 布局下横向菜单常见错位和撑开问题
桌面端菜单突然换行、文字被截断、右侧图标跑飞……八成是 flex-wrap 和 flex-shrink 没控住。Flex 默认会压缩子项宽度来适应容器，但导航文字长度不一，压缩后易折行。
- 给
.nav-list加flex-wrap: nowrap，强制单行 - 给每个
<li>加flex-shrink: 0，防止被压缩 - 如果用
justify-content: space-between，注意首尾项间距过大，改用space-around或手动设margin - 字体用
font-variant-numeric: tabular-nums对齐数字类菜单项（如“订单 2”），避免宽度跳变
移动端点击汉堡图标没反应？先查这三处
不是 JS 报错，大概率是 CSS 层叠或 HTML 结构出了问题。尤其在 Vue/React 项目里，开发者常把 label 和 input 分开放在不同组件，导致 for 关联失效。
立即学习“前端免费学习笔记（深入）”；
- 检查
label[for]的值是否严格等于input[id]（大小写、空格、连字符都不能错） - 确认
input没被display: none或visibility: hidden彻底移出可交互范围——要用position: absolute; opacity: 0; pointer-events: none; - 看浏览器 DevTools 的 Elements 面板里，
input是否被其他样式（比如重置 CSS 里的all: unset）清掉了type="checkbox"行为
focus-visible 样式没做，导致键盘用户按 Tab 键时找不到当前焦点项。 
