鱼屏适配必须用正确的viewport标签、dom顺序和断点策略：①viewport需设为width=device-width且禁用缩放限制；②dom结构须按header→nav→main→aside→footer顺序排列；③媒体查询需基于真实换行临界点而非固定断点；④卡片需设min-width防拉伸变形。
viewport meta 标签必须写对，否则鱼屏根本不会触发响应逻辑
超宽屏（比如 3440×1440、5120×1440）不是“大一点的桌面屏”，而是视口宽度远超常规断点的特殊设备。如果 <meta name="viewport"> 缺失或写成 width=1200 这类固定值，浏览器会按默认 980px 或 device-width 的旧逻辑渲染，导致整个页面被横向压缩、文字挤成细线、焦点顺序错乱——视觉动线从一开始就被物理截断。
关键点只有两条：
- 必须用 <meta name="viewport" content="width=device-width, initial-scale=1">，且放在 最顶部
- 不要加 maximum-scale 或 user-scalable=no，鱼屏用户常需双指缩放查看细节，禁用等于直接放弃这部分人群
DOM 顺序必须匹配“主内容→侧边工具→辅助信息”的横向阅读流
鱼屏用户视线天然从左向右扫视，但很多页面 HTML 里先写 <aside></aside>（右侧工具栏），再写 <main></main>，最后才是 <nav></nav>。CSS 用 float: right 或 grid-column: 3 把工具栏“拽”到右边，视觉上没问题，可键盘 tab 时焦点先落到最右的按钮，再跳回左边标题——动线断裂，用户会卡在操作入口却找不到上下文。
正确结构只有一种：
- <header></header> → <nav></nav> → <main></main> → <aside></aside> → <footer></footer>
- <main></main> 必须包裹核心业务模块（如表格、表单、图表容器），不能只包文字段落
- <aside></aside> 里放筛选器、导出按钮、状态面板等高频操作项，但 DOM 位置必须在 <main></main> 之后
媒体查询不能只靠 768px / 1200px，得测真实换行临界点
鱼屏下，导航菜单可能在 2200px 就开始换行，而侧边栏卡片在 2800px 才撑满两列。硬套 @media (min-width: 1200px) 会让布局在 1920px～2560px 区间内既不收缩也不扩展，文字行宽超过 120 字符，阅读疲劳指数飙升。
实操建议：
- 用 Chrome DevTools 的 Device Toolbar 拖动宽度，观察导航文字何时换行、表格列是否重叠、按钮是否被截断
- 记下具体像素值（比如 @media (min-width: 2150px)），而不是估算
- 对关键组件单独设断点：@media (min-width: 2800px) { .dashboard-grid { grid-template-columns: 1fr 300px; } }
- 避免嵌套媒体查询，@media (min-width: 2150px) and (orientation: landscape) 直接写，别拆成两层
flex-wrap + min-width 组合必须加，否则卡片在鱼屏下被拉成细条
鱼屏常见错误：给卡片容器设 display: flex; flex-wrap: wrap;，但子项没设 min-width。结果浏览器把每个卡片强行压缩到 100px 宽，图标变形、文字折行、CTA 按钮只剩半边——视觉动线被物理撕裂，用户根本无法识别模块边界。
安全写法：
- 卡片级元素统一加 min-width: 320px（或 min-width: 20rem）
- 父容器用 gap: 1.5rem 替代 margin，避免最后一项多出空白
- 如果用 Grid，改用 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr))，比 flex 更可控
- 别给 flex 容器同时设 width: 100% 和 max-width: 1440px，鱼屏下 max-width 会成为硬性截断点，右侧大片留白
鱼屏动线优化最难的不是 CSS 写法，而是接受一个事实：你不能靠“视觉居中”来引导注意力。用户视线从左出发，必须让第一个交互锚点（比如搜索框、主表头、操作按钮）出现在 DOM 最靠前的位置，且不能被 position: absolute 或 z-index 移到后面去——否则 tab 键永远找不到它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
