横向导航栏小屏适配需摒弃固定宽度思维，通过弹性布局、合理断点、flex-wrap控制、缩放兼容及必要JS介入实现真正响应式，禁用vh设高度防iOS跳变。
横向导航栏在小屏上直接换行或溢出，本质是没切断“固定宽度思维”——它不是靠 JS 算像素、也不是靠媒体查询硬切断点就能一劳永逸，而是要让布局本身具备弹性响应能力。
为什么 max-width: 1920px 会让导航栏缩放时错位
很多页面给 body 或 html 加了 max-width: 1920px，以为能限制大屏宽度。但浏览器缩放（比如缩到 75%）会改变视口逻辑尺寸，此时 max-width 是按缩放后的视口计算的，body 实际宽度反而小于可视区域，导航栏自然无法铺满。
- 移除
body和html上所有max-width声明 - 用
width: 100%+max-width: 100%显式约束导航容器自身，防父级意外撑开 - 确保
padding用rem或em，避免缩放时内边距失衡
@media 断点该按什么设：别写 max-width: 768px 就完事
断点不是设备型号列表，而是视口宽度连续变化中的关键拐点。768px 在 iPad Pro 横屏下可能已失效，在折叠屏展开态更不适用。真正要盯的是内容可读性与交互可行性。
- 优先用
@media (max-width: 600px)覆盖绝大多数手机竖屏场景 - 加一层
@media (min-width: 601px) and (max-width: 1024px)应对平板及小屏横置 - 折叠屏需额外处理：
@media (screen-spanning: single-fold-vertical)表示合盖竖屏，此时应启用底部 tab；@media (screen-spanning: single-fold-horizontal)表示展开横屏，才恢复顶部横向导航 - 旧浏览器不支持
screen-spanning，必须用window.matchMedia+window.innerWidth - window.innerHeight差值回退判断
Flexbox 布局中 flex-wrap 和 flex 的实际取舍
单纯设 display: flex 不等于自适应。当菜单项变多或字体缩放后，横向空间不足，要么文字被截断，要么整行溢出。这时候 flex-wrap 是开关，但怎么 wrap 才合理？
立即学习“前端免费学习笔记（深入）”；
- 桌面端：用
flex-wrap: nowrap+justify-content: space-between保持 logo 与操作区分离 - 小屏端：切到
flex-wrap: wrap，并为每个<li>设flex: 1 1 120px，既防止过窄挤压文字，又允许在空间足够时自动均分 - 避免对所有子项设
flex: 1—— 这会导致 logo 被压缩变形；应单独给 logo 设flex: 0 0 auto - 如果导航项含图标+文字，加
white-space: nowrap防止单词断行破坏语义
JavaScript 动态调整只在必要时介入
纯 CSS 能覆盖 90% 场景。JS 仅用于两类情况：一是折叠屏状态切换（screen-spanning 不可用时），二是需要根据真实渲染后宽度做微调（比如某项文字超长导致换行破坏对齐）。
- 监听
resize事件前，先用requestAnimationFrame节流，避免频繁重排 - 不要直接改
style.width，优先通过 class 切换触发 CSS 变化 - 检测是否真需要调整：用
nav.scrollWidth > nav.clientWidth判断是否溢出，而不是仅依赖window.innerWidth - 折叠屏 JS 回退逻辑里，差值判断阈值建议设为 ±40px，避免铰链区像素抖动误判
最易被忽略的一点：导航栏的 height 必须用 px 或 rem 固定，不能用 vh。因为 vh 在 iOS Safari 地址栏收起/展开时会跳变，导致导航栏高度闪烁甚至遮挡内容。
