答案：通过媒体查询结合Flexbox或Grid布局调整导航栏排列方式，可解决移动端溢出问题。具体做法包括在小屏幕上将flex-direction设为column、启用flex-wrap换行，或使用Grid的repeat函数动态调整列数；配合最小宽度设置、增大点击区域、隐藏次要项或使用汉堡菜单等优化手段，确保导航在不同设备上正常显示且用户体验良好。
当CSS导航栏在移动端出现溢出问题时，通常是因为固定宽度、过多的导航项或未适配小屏幕的布局方式导致。通过使用媒体查询结合Flexbox或Grid布局动态调整列数和排列方式，可以有效解决这一问题。
使用Flexbox配合媒体查询
将导航栏设为flex容器后，在小屏幕上可通过媒体查询改变其方向或允许换行，避免水平溢出。
关键做法：
- 默认使用横向排列（flex-direction: row）
- 在移动端切换为竖向排列或启用换行（flex-wrap: wrap）
- 设置每个导航项的最小宽度，防止压缩过度
nav {
display: flex;
flex-wrap: nowrap;
gap: 1rem;
}
@media (max-width: 768px) {
nav {
flex-direction: column;
align-items: center;
}
nav a {
text-align: center;
width: 100%;
}
}
使用Grid布局动态调整列数
Grid更适合控制每行显示多少个导航项。通过媒体查询调整grid-template-columns，可让导航项在不同屏幕下自动重排。
立即学习“前端免费学习笔记（深入）”；
建议策略：
- 桌面端：每行4~6项（repeat(6, 1fr)）
- 平板：改为3列（repeat(3, 1fr)）
- 手机：单列垂直堆叠（1fr）
nav {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 768px) {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 480px) {
grid-template-columns: 1fr;
}
额外优化建议
除了布局调整，还可增强移动端体验：
- 给导航链接增加合适的内边距，提升点击区域
- 隐藏次要菜单项，用“更多”按钮展开
- 考虑使用汉堡菜单替代完整导航栏
- 确保字体大小在手机上可读（不小于14px）
