GPT中文小秘书挑几下就能开工
我积分

画个页面响应式断点示意流程图

关于「画个页面响应式断点示意流程图」：能拿到什么、要点选什么、怎么办

点几下，3 分钟拿到带像素标注的响应式断点示意图。生成响应式断点示意流程图，清晰展示PC/平板/手机三端典型宽度、容器变化与布局切换逻辑；不提供代码实现，不替代设计评审。

能拿到什么

  • 推荐：一张带像素标尺和断点标签的响应式切换示意图 PNG，可选配一页说明文字（16:9横版，三列对应PC/平板/手机，容器框标宽度，箭头标切换条件），约 3 分钟
  • 旗舰：主示意图 PNG、分端拆解图、带媒体查询注释版、英文标注版

要你点选的几项

画面主体、用在哪、风格、色调、画面比例、要几版/要什么变体、要标哪些数值、要画哪些元素、要标哪些行为、补充情况。多数点一下就行，没选的按常见情况替你定，交付时说清哪几项是按默认的。

怎么办

  1. 选断点组合和容器变化
  2. 勾选要展示的布局行为
  3. 补充说明画面主体
  4. 生成示意图并下载

别人还这样说

  • 帮我画个断点切换的流程图，让产品一眼看懂怎么变
  • 画一张图，展示PC、平板和手机端的响应式断点逻辑。
  • 需要一张图给实习生讲清楚三端布局怎么切
直接说你要办的事。下面是别人怎么办的，点任何一项就换成你自己的。左边是别人怎么办的，右边是你的，点一项就开始改。
示范 · 别人这样说

「我们用768px和1024px做平板断点，主容器从1200px缩到960px，侧边栏在小屏收起」

替他选了：1版主图（含全部断点） · 侧边栏（显示/隐藏/折叠图标）

按示范选好的 点一项就变成你的

你的成品会在这里出现
示例成品 · 不是你的按示范写的，看个样子
横向流程图：左侧标注'PC（≥1200px）→ 平板（768px–1023px）→ 手机（≤767px）'；中间三列分别画出对应视口宽度下的容器框（1200px/960px/100%）、内部布局块（两栏→单栏+折叠图标）；右侧箭头标注切换触发条件（如'视口≤767px时隐藏侧边栏，显示汉堡菜单'）；配色清爽，带像素标尺和断点标签。

GPT中文 也可能出错，成品请自己核对关键数字和事实。条款 · 隐私