手机端导航栏撑破屏幕的主因是固定宽度、长文本、浮动残留或flex未设换行/收缩规则；应改用百分比+max-width、flex-wrap、flex弹性收缩、box-sizing:border-box及响应式折叠菜单。
手机端导航栏撑破屏幕，通常是因为元素设置了固定宽度（如 width: 200px）、未处理的长文本、浮动布局残留，或 flex 项目未设置换行/收缩规则。核心解法是用响应式单位 + 弹性容器控制，而非强行截断或隐藏。
用百分比 + max-width 控制导航容器宽度
导航外层容器不要写死像素值，改用相对单位，并限制最大宽度：
-
推荐写法：
.nav { width: 100%; max-width: 100vw; }—— 确保不超视口，同时适配不同屏宽 - 避免
width: 1200px或min-width: 800px，这类值在小屏下必然溢出 - 若需居中且有边距，用
margin: 0 auto;配合max-width，而不是靠left: 50%+transform模拟
flex 布局中让菜单项自动换行或收缩
单行 flex 导航在窄屏下容易挤出屏幕，关键在 flex-wrap 和子项弹性行为：
- 给导航容器加
display: flex; flex-wrap: wrap;，菜单项可自动折行（适合底部导航或按钮较多场景） - 若必须单行，给每个菜单项设
flex: 1 1 auto;或flex: 0 1 calc(25% - 8px);（配合 gap），让它们等比压缩 - 禁用
white-space: nowrap;（默认值），允许文字自然换行；如需单行显示，改用text-overflow: ellipsis;+overflow: hidden;+white-space: nowrap;
移除影响宽度的“隐形”因素
很多溢出不是因为内容本身，而是盒模型或继承样式干扰：
立即学习“前端免费学习笔记（深入）”；
- 检查是否有
padding-left/right或border未被box-sizing: border-box;包含，统一加上* { box-sizing: border-box; } -
清除浮动：如果导航用了
float: left，记得加overflow: hidden;或伪元素清除，否则父容器高度塌陷，可能引发布局错乱 - 禁用用户缩放导致的意外放大：
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"中慎用user-scalable=no，优先用 CSS 修复
补充：移动端专用折叠菜单（可选）
当菜单项过多，硬撑体验差，建议用汉堡菜单替代：
- 用
@media (max-width: 768px)隐藏原导航，显示button.nav-toggle和nav.mobile-nav - mobile-nav 用
position: absolute;或transform: translateY(-100%);隐藏，点击后展开 - 展开时设
flex-direction: column;+width: 100%;，确保每项占满全宽
