在mastergo中实现响应式设计需先创建响应式画布，再设断点、配置图层约束，最后复用响应式组件；未启用响应式画布则断点不可用，约束仅控制位置与尺寸，样式属性需手动调整。
在MasterGo中实现响应式设计，需要借助画布缩放、组件自适应布局与断点系统协同工作，而不是靠传统代码媒体查询；直接拖拽调整画布尺寸后若未启用响应式约束，所有图层会等比拉伸失真。
设置画布为响应式容器
打开项目→点击左上角「+ 新建页面」→在弹出面板中选择「响应式画布」模板，或手动创建空白画布后右键画布→选择「转换为响应式画布」。
这一步不可跳过：只有标记为响应式画布的页面，才支持后续添加断点和自动适配行为。【未勾选“响应式画布”时，所有断点设置将灰显不可用】
添加并管理断点
方法一：在右侧属性栏顶部找到「断点」标签→点击「+ 添加断点」→输入名称（如 mobile / tablet）→设定宽度值（如 375 / 768）→回车确认。
方法二：直接拖动画布右下角的断点滑块，松手后自动创建一个临时断点；再双击该断点标签修改名称与精确像素值。
每个断点对应一套独立的图层位置、尺寸与可见性状态。切换断点时，MasterGo不会自动重排元素——你需要手动调整各断点下的图层布局。
让图层随断点变化自动适配
第一步：选中需响应式控制的图层（如按钮、卡片、文字块）→在右侧属性栏开启「约束」开关。
第二步：点击约束网格中的锚点组合，例如「左右拉伸」表示该图层在断点切换时保持左右边距不变、宽度自动伸缩；「顶部固定+底部拉伸」适合全高侧边栏。
第三步：对同一图层，在不同断点下分别设置约束类型。比如在 mobile 断点设为「居中+不拉伸」，在 desktop 断点设为「左对齐+左右拉伸」——MasterGo 会记录每套断点下的独立约束配置。
注意：约束仅影响图层相对父容器的位置与尺寸行为，不影响字体大小、圆角、阴影等样式属性；这些需手动在每个断点中单独调整。
复用响应式组件
将已配置好约束与多断点状态的图层组→右键→「转为组件」→在组件面板中开启「响应式组件」开关。
插入该组件实例后，它会继承原始组件的所有断点布局逻辑；修改任一实例的某个断点内布局，可选择「仅更新当前实例」或「同步更新全部实例」。
这一步操作起来很简单，直接把组件拖进新页面就行，但必须确保原始组件是在响应式画布中创建并设置了至少两个断点，否则实例无法正确继承响应行为。
