Skip to content

fix: responsive design overhaul with 5 progressive breakpoints - #108

Merged
Pigbibi merged 1 commit into
mainfrom
fix/responsive-design
Jun 28, 2026
Merged

fix: responsive design overhaul with 5 progressive breakpoints#108
Pigbibi merged 1 commit into
mainfrom
fix/responsive-design

Conversation

@Pigbibi

@Pigbibi Pigbibi commented Jun 28, 2026

Copy link
Copy Markdown
Contributor

改动

重构响应式 CSS,用 5 个渐进式断点替换原有 3 个冲突断点。

断点策略

断点 范围 主要变化
XL ≥1200px 默认桌面样式
L ≤1199px 间距压缩,执行现金策略→单列
M ≤899px 主布局单列,表单段落→单列,平台条→3列
S ≤679px 顶栏堆叠,平台条→2列
XS ≤479px 隐藏副标题,紧凑控件
XXS ≤374px 极小屏安全网

关键修复

  • 平台条不再 5 列横向滚动(手机上每列仅 75px 的问题)
  • 顶栏渐进退化而非一次性塌陷
  • 表单段落提前到 899px 变单列(原来 680px 导致中间尺寸拥挤)
  • 手机端所有触控目标 ≥42px

修改范围

  • 仅 1 个文件:web/strategy-switch-console/index.html
  • 纯 CSS 修改,不动 HTML/JS
  • +337 -48 行

🤖 Generated with Claude Code

- Remove old conflicting breakpoints (820px, 540px, 680px)
- Add L (≤1199px), M (≤899px), S (≤679px), XS (≤479px), XXS (≤374px)
- Platform strip: desktop 2-col → tablet 3-col → mobile 2-col (no more 5-col scroll)
- Topbar degrades progressively: shrink → stack → hide subtitle
- Form sections collapse at 899px instead of 680px
- All touch targets ≥42px on mobile
- Pure CSS changes, no HTML/JS modifications

Co-Authored-By: Claude <noreply@anthropic.com>
@Pigbibi
Pigbibi merged commit 0b67982 into main Jun 28, 2026
0 of 2 checks passed
@Pigbibi
Pigbibi deleted the fix/responsive-design branch June 28, 2026 21:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant