小屏下 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。
