css 页面在小屏下导航占用空间过大怎么办_利用媒体查询折叠菜单

小屏下 nav 元素撑开布局需用媒体查询（如 max-width: 767px）触发汉堡菜单，配合 checkbox 或按钮控制显隐，使用 transform: translateX() 实现平滑滑入，并补充 aria-expanded、inert 等无障碍支持。

小屏下 nav 元素撑开布局怎么办

直接原因是导航项在移动端未做响应式收缩，display: flex 或固定宽度的 ul > li 在窄屏上强行换行或溢出。不改结构只调样式，大概率导致横向滚动、文字截断或父容器高度异常。必须用媒体查询配合 DOM 状态切换，不能只靠 max-width 降字号或缩 padding。

用 @media 触发汉堡菜单的关键条件

触发点不能只写 max-width: 768px —— 实际要覆盖 iPad 竖屏（768px）、iPhone X+ 横屏（812px）等常见断点。更稳妥的是用 max-width: 767px（排除 768px 这个模糊边界），同时确保 HTML 中有可切换的 input[type="checkbox"] 或带 data-menu-open 的按钮，否则 CSS 无法控制显隐。

• @media (max-width: 767px) 内把原导航 ul 设为 display: none
• 新增 .menu-toggle 按钮，用 ~ 或 + 选择器联动隐藏/显示菜单（如 .menu-toggle:checked ~ .nav-menu）
• 避免用 visibility: hidden，它仍占布局空间；必须用 display: none 或 height: 0 + overflow: hidden

transform: translateX() 比 left: -100% 更可靠

用 left 移动菜单容易受父容器 position 影响，且动画卡顿明显；transform 触发 GPU 加速，滑入更顺滑。但要注意：目标元素需设 position: fixed 或 absolute，否则 transform 不会脱离文档流。

.nav-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100vh;
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.menu-toggle:checked ~ .nav-menu {
  transform: translateX(0);
}

键盘与屏幕阅读器支持常被忽略

纯 CSS 汉堡菜单默认不支持 Tab 键聚焦、Enter 触发，也缺少 aria-expanded 状态标记。必须补上：

• JS 监听点击后同步更新 aria-expanded 值（true/false）
• 菜单展开时，用 inert 属性或 aria-hidden="true" 临时禁用主内容区域的交互

没有 JS 配合的纯 CSS 方案，在无障碍层面是残缺的 —— 尤其当菜单含下拉项或表单时，焦点管理根本无法绕过 JS。