MasterGo中实现设计稿断点适配需先启用断点标记并自定义断点,再为容器添加断点约束,最后在各断点下独立配置宽度、居中、内边距及锚点;预览用断点预览模式,导出需为每个断点创建单独交付版本。

在MasterGo中实现设计稿的断点适配,是响应式布局的核心操作,直接决定UI在不同屏幕尺寸下的显示效果。你不需要写代码,但必须理解容器约束与画布缩放的关系,否则导出后会出现元素错位或溢出。
设置画布初始断点
打开MasterGo文件 → 点击右上角「视图选项」→ 勾选「显示断点标记」。此时画布顶部会出现默认的320px、768px、1440px三档断点横条,它们是系统预设的移动端、平板、桌面基准尺寸。
点击任意断点横条右侧的「⋯」→ 选择「编辑断点」→ 输入自定义宽度值(如375、414、1920),支持输入带单位的数值(375px)或纯数字(系统自动补px)。【删除默认断点前务必确认已有容器设置了对应约束,否则已配置的响应行为将失效】
为容器绑定断点行为
选中一个容器图层 → 右侧属性栏切换到「约束」面板 → 点击「+ 添加断点约束」按钮。
方法一:拖拽式绑定
在弹出的断点列表中,将鼠标悬停在某个断点名称上 → 出现「拖拽绑定」光标 → 按住左键拖入当前容器的约束区域 → 松开后该断点即被激活并显示「已启用」状态。
方法二:手动勾选绑定
点击「添加断点约束」后,在下拉菜单中逐个勾选需要适配的断点(如仅勾选768px和1440px),勾选后对应断点会出现在约束面板顶部的标签栏中,点击标签可快速切换查看该断点下的容器表现。
配置单个断点下的容器响应规则
第一步:确保已为容器添加至少一个断点约束。
第二步:点击约束面板顶部对应断点的标签(如「768px」),画布将自动缩放到该宽度,容器右侧属性栏同步刷新为该断点专属设置项。
第三步:调整「宽度」为「固定」或「填充容器」;设置「水平居中」开关;修改「内边距」数值;拖动「锚点」控制容器在父级中的定位逻辑。
第四步:切换回其他断点标签,重复第三步操作——每个断点的设置彼此独立,不会互相覆盖。
注意:若某断点下未做任何修改,该断点将沿用「基础断点」(即未加任何断点约束时的原始状态)的样式。因此,首次配置建议从最小断点(如375px)开始逐级向上适配。
预览与导出断点效果
点击右上角「预览」按钮 → 在弹出窗口左上角选择「断点预览模式」→ 下拉选择任一已配置断点 → 实时查看交互与布局变化。
导出时,MasterGo默认按当前激活断点输出资源。若需多断点切图,必须先在「资源库」中为每个断点单独创建「交付版本」:点击资源库 → 「新建交付版本」→ 命名(如“移动端切图”)→ 在「适用断点」中仅勾选375px → 点击「生成」。每个交付版本只包含其所绑定断点下的图层状态与标注数据。


















