VTY 响应式定案Demo = 长什么样 · PRD = 怎么设计/实现
当前:看「做出来什么样、怎么摆」。拖宽度档切换布局。
1280 px 新标签打开 →
开模拟:1592=三折列表 · 1024=两折 · 504=外屏 · 均无 PC 卡片
断点清单(前端落地 · 主 + 次级)BREAKPOINTS.mdbreakpoints.js

主断点 → data-layout

常量px布局态
BP_H5_MAX767H5_LOCK
BP_TABLET_MAX1023TABLET
BP_PC_MIN1024PC_NARROW↑
BP_PC_NARROW_MAX1279PC_NARROW
BP_PC_WIDE_MIN1280PC_WIDE

次级 · PC 卡片列数(仅 PC 壳)

宽度 w列数
> 13995
1100 – 13994
900 – 10993
600 – 8992
≤ 5991

次级 · 折叠折态(foldable)

宽度 wposture
≤ 767cover
768 – 1100dual
≥ 1101triple

次级 · 组件 / 布局

规则断点
Hero 堆叠≤ 1023
浮条 / 双栏鉴权≥ 1024 PC壳
顶栏赞助≥ 1280 PC壳
滚球行单列≤ 420
三折联赛双列> 1200 triple
当前宽度下生效规则将显示于此…
当前宽度 1280px
主布局 PC_WIDE · 赛程 4
次级
↑ 展开顶栏「断点清单」看全表 · 次级按钮快速跳界