VTY 响应式定案Demo = 长什么样 · PRD = 怎么设计/实现
跟随窗口 新标签打开 →
H5 UI 按 430px 出图 · 同属手机断点 ≤767
点选上方宽度预设,此处显示归属断点与设计说明…
开模拟:1592=三折列表 · 1024=两折 · 504=外屏 · 均无 PC 卡片
断点清单(前端落地 · 主 + 次级)BREAKPOINTS.mdbreakpoints.js

主断点 → data-layout

常量px布局态
BP_H5_MAX767H5_LOCK(手机)
BP_TABLET_MAX1199TABLET(平板)
BP_PC_MIN1200PC

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

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

次级 · 折叠折态(foldable)

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

次级 · 组件 / 布局

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