响应式调整功能可以帮助智能调整组件大小,设置后,调整成不同设备尺寸,都可以查看设计内容适配效果,不需要按多种设备尺寸重新设计。
添加响应式调整
选中画板中的图层,选择「添加」,添加响应式调整。
「引用组件」默认添加响应式调整属性。
响应式调整可分为两类:水平方向响应式调整、垂直方向响应式调整;
选择响应式调整图示或选择下拉菜单内容即可对响应式调整方式进行选择。
水平方向响应式调整
- 左间距固定: 图层距左侧距离、图层宽度不变,距右侧距离发生变化
- 居中: 图层宽度不变,距左侧距离、右侧距离发生变化;
- 右间距固定: 图层距右侧距离、图层宽度不变,距左侧距离发生变化;
- 左右间距固定: 图层距左侧距离、右侧距离不变,图层宽度变化;
- 缩放: 图层距左侧距离、右侧距离、图层宽度都将按原比例变化。
垂直方向响应式调整
上间距固定: 图层距顶部距离、图层高度不变,距底部距离发生变化;
- 居中: 图层高度不变,距顶部距离、底部距离发生变化;
- 下间距固定: 图层距底部距离、图层高度不变,距顶部距离发生变化;
- 上下间距固定: 图层距顶部距离、底部距离不变,图层高度变化;
- 缩放: 图层距顶部距离、底部距离、图层高度都将按原比例变化。
实际场景中的响应式设置
通过水平、垂直方向的组合响应式设置,基本能实现所有常见的适配效果。
多级画板的响应式调整变化
多级画板可以帮助做出更复杂多样的适配效果。
当多个画板嵌套时,图层响应式调整只会对上一父级生效,无需担心子级画板中的组件设置会受到外层画板的影响。
示例:
单个模块中的标题相对模块左对齐、相对居中;
所有模块在网页页面中相对居中。