导航菜单小屏显示不全的解决思路有两种：一是用flex-wrap: wrap实现自动换行，适用于菜单项少、允许垂直延伸的场景；二是用媒体查询+display:none隐藏次要项，配合“更多”下拉或汉堡菜单，兼顾可访问性与触控体验。
导航菜单在小屏幕下显示不全，本质是容器宽度不足而子项又强行单行排列。解决思路有两个方向：让菜单自动换行（flex-wrap: wrap），或在空间紧张时隐藏次要菜单项（配合 JavaScript 或 CSS 媒体查询 + display: none）。关键不在“用哪个”，而在“怎么用得合理”。
用 flex-wrap 实现自动折行
适用于菜单项数量不多、允许垂直延伸的场景（如底部导航、移动端简化版顶部栏）。需注意父容器必须是 flex 布局，且不能设 white-space: nowrap 或固定高度限制换行。
- 给导航容器（如
<nav>或<ul>）设置：display: flex; flex-wrap: wrap; - 菜单项（
<li>或<a>）建议加flex-shrink: 0，避免被压缩变形 - 配合媒体查询，在小屏下调小字体、内边距，提升换行后的可读性
用媒体查询 + display 隐藏次要菜单
更适合标准顶部导航——保持单行、优先展示核心入口（首页、产品、联系），把“关于”“博客”“帮助”等放入“更多”下拉或汉堡菜单。
- 先为所有菜单项设默认
display: block，再在小屏断点中对非核心项设display: none - 用
data-priority属性标记优先级，比如<li data-priority="2">帮助</li>，便于后续 JS 动态控制 - 隐藏后务必提供入口，例如右侧固定一个
⋯按钮或汉堡图标，点击展开隐藏项
更灵活的做法：结合 max-width 和 visibility
比起直接 display: none，用 visibility: hidden + width: 0 可保留布局流，方便做过渡动画；再配合 max-width 控制容器最大宽度，防止文字溢出。
立即学习“前端免费学习笔记（深入）”；
- 隐藏项样式示例：
visibility: hidden; width: 0; overflow: hidden; transition: all 0.2s; - 展开时改为：
visibility: visible; width: auto; - 注意：不要只依赖
width: 0，否则无障碍阅读器可能跳过内容，建议同时用aria-hidden="true/false"
别忘了触控与可访问性
响应式导航不只是“看起来全”，还要“能操作、能读到”。小屏下点击区域至少 44×44px，菜单切换要有 aria-expanded 状态，键盘 Tab 要能进入隐藏菜单。
- 给汉堡按钮加
aria-label="打开导航菜单"，展开后更新为aria-label="关闭导航菜单" - 隐藏菜单容器加
role="menu"，菜单项加role="menuitem" - 用
focus-within或 JS 监听keydown支持键盘展开/收起
