必须添加viewport元标签，否则浏览器不进入响应式模式；推荐flex+flex-wrap实现导航自适应；需配合JS或checkbox切换汉堡菜单；字体用rem动态适配，点击区域≥44×44px并加touch-action。
导航栏在移动端撑出横向滚动条？检查 viewport 元标签是否缺失
没有这行，再好的 CSS 也白搭。iOS Safari 和 Android 浏览器默认按 980px 宽度渲染页面，导航栏里的 ul 或 nav 一排铺开就会溢出。
必须在 <head> 中加入：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
漏掉它，max-width: 100%、flex-wrap 全部失效——不是代码写错了，是浏览器根本没进“响应式模式”。
display: flex + flex-wrap: wrap 是最稳的导航栏自适应组合
用浮动或 inline-block 做响应式导航，到小屏上容易换行错位、间隙失控；Flexbox 能真正按容器宽度自动折行，且对齐可控。
立即学习“前端免费学习笔记（深入）”；
关键点：
-
nav ul设为display: flex，子项li默认不换行 - 加
flex-wrap: wrap后，当所有li总宽超容器时，自动折到下一行 - 用
justify-content: center或space-between控制水平分布，避免左贴边难点击 - 移动端小屏下，建议给
li a设最小宽度（如min-width: 80px）和足够内边距，防止误触
真·自适应不是只靠 CSS，得配合 JS 切换汉堡菜单
纯 CSS 的 @media 可以隐藏/显示菜单，但无法实现点击展开收起逻辑。移动端导航栏空间有限，必须折叠。
常见做法：
- 用
input[type="checkbox"]+label模拟开关（无 JS 方案，适合静态页） - 更通用的是监听
click，切换nav ul的max-height和overflow，配合 CSS 过渡动画 - 注意：不要用
display: none切换，会导致屏幕阅读器跳过内容；改用visibility: hidden+height: 0+aria-expanded属性才可访问
字体大小和点击区域不随屏幕缩放？查 rem 基准和 touch-action
导航文字在 iPhone 上看着小、点不中，大概率是单位写死了 px，或没设合适的根字号。
实操建议：
- 用
html { font-size: 100%; }起手，再通过媒体查询动态调font-size（如html { font-size: 16px; }→@media (max-width: 480px) { html { font-size: 14px; } }） - 导航链接的
padding至少保证44px × 44px（iOS 最小可点击区域），可用padding: 0.5rem 1rem配合 rem 实现等比缩放 - 如果点击后有延迟或手势冲突，给
nav加style="touch-action: manipulation;"，告诉浏览器这个区域只处理点击
自适应导航真正的难点不在“怎么让它变小”，而在“怎么让手指准确点中、读屏器能识别、横竖屏切换时不闪跳”。这些细节不补全，用户第一眼就可能划走。
