小屏下导航应物理移至底部语义区域而非仅用fixed定位，需结合媒体查询、dom结构调整、可访问性补全（role/aria-label）、flex防缩放、触控优化及焦点管理，确保语义、体验与无障碍统一。
小屏下导航移到底部，不是靠 position: fixed 就完事
直接给 nav 加 position: fixed; bottom: 0; 看似简单，但实际会出三类问题：遮挡内容、滚动时悬空、键盘焦点跳失。真正可靠的方案是用媒体查询 + DOM 位置调整 + 可访问性补全。
必须把导航结构移进 footer 或底部容器里
纯 CSS 移动位置（如 flex-direction: column-reverse 或 order）只改视觉顺序，DOM 结构没变，屏幕阅读器仍按原顺序读，且 SEO 抓取可能错乱。正确做法是让小屏下 nav 物理位于页面底部语义区域。
- HTML 中预留一个
<footer class="bottom-nav-container"></footer> - JS 在
matchMedia("(max-width: 768px)").matches为真时，用appendChild()把nav移进去 - 大屏时再移回原位（比如
header内），避免残留 - 移入后给
nav加role="navigation"和aria-label="底部导航"
display: flex 布局在底部栏里容易撑开或换行
移动端底部栏宽度有限，flex 默认会压缩子项，导致文字截断或图标错位。不设 flex-shrink 或没处理 white-space，点按热区就变小。
- 每个
li或按钮加flex: 0 0 auto，禁止缩放 - 文字用
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;控制溢出 - 图标和文字用
display: flex; flex-direction: column; align-items: center;垂直堆叠，比水平排更省空间 - 高度统一用
min-height: 56px（符合 Material Design 触控最小尺寸）
键盘与手势交互在底部栏里常被忽略
底部栏离拇指区近，但若没处理 Tab 键顺序、Escape 关闭逻辑或 touch-action: manipulation，体验就断层。
- 用
tabindex="0"让每个导航项可聚焦，配合focus-visible样式 - 点击后立即
blur()当前元素，防止重复触发 - 对 iOS Safari 加
style="touch-action: manipulation;"，避免 300ms 延迟 - 如果底部栏有展开态（比如带二级菜单），需监听
click外部区域自动收起
最易被忽略的点是：底部栏不是“固定在底部”就行，而是要让它在 DOM 顺序、焦点流、触控反馈、语义层级上都真正属于底部——否则用户滑到页面中部时，它突然浮现在眼前，既干扰阅读，又破坏上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
