自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个 静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态布局，确保 一个页面在所有终端上（各种尺寸的PC、平板、手机、智能手表等）都能显示出令人 满意的效果，利用流式布局加弹性布局，分别为不同的屏幕分辨率定义布局。
标准页面的自适应布局主要是通过“分栏”组件实现的。“分栏”组件中包含一个或 多个“栏”组件，“栏”组件可以简单理解为上一小节介绍的“容器”组件，用来提 供某一部分的布局，多个“栏”组件组成“分栏”组件，通过配置不同分辨率屏幕中
“栏”组件的呈现形式实现不同大小屏幕下不同的显示方案，如图5-65。
图5-65 分栏组件
“分栏”组件右侧属性配置面板的“行布局”中可以选择“分栏”组件在PC端和移动 端下“栏”的布局形式。
“PC”属性中可以依据图示选择“分栏”组件，在PC端包含多少个“栏”。
为了方便演示说明如何使用“分栏”组件实现自适应布局，向画布中拖拽一个“分 栏”组件，在“PC”下选择从左到右三个“栏”的布局形式。向每个“栏”中拖拽一 个“标签”组件和一个“输入框”组件用来模拟录入员工信息的场景，如图5-66。
图5-66 分栏组件模拟录入员工信息
“phone”属性中可以依据图示选择“分栏”组件中“栏”在移动端的布局形式，例 如图5-64所示。当在“PC”选择左到右三个“栏”的布局形式时，移动端的屏幕较 小，仍然选择从左到右布局可能导致页面元素显示不全或变形，这时可以在
“phone”中选择在移动端下“栏”转换为从上到下排列，这时单击右上角 手机图标就可以模拟在移动端展示的效果，如图
5-67。
图5-67 移动端展示效果“竖排”
如果在“phone”中依旧选择从左到右的布局方式，则展示效果如图5-68。
图5-68 移动端展示效果“横排”
“布局模式”属性可以调整“分栏”组件为流式布局或弹性布局，用来控制“分栏”
组件中多个“栏”组件或其他组件的布局，更多流式布局和弹性布局的信息请参见基 础布局设置。
“录入分隔比例”：在“PC”属性的选项中，单击最后的齿轮按钮，可以设置“录入 分隔比例”，这个比例指的是将整个屏幕宽度划分为24份，每个“栏”组件所占宽度 比例，通过设置“录入分隔比例”，在不同大小的屏幕下“分栏”组件获得屏幕的宽 度，决定每个“栏”的宽度，即使在不同大小的屏幕下显示的比例是不变的，从而实 现自适应布局。设置“分栏”选择从左到右三个“栏”均分，显示“录入分隔比例”
为“8:8:8”，如图5-69所示。
图5-69 “录入分隔比例”为“8:8:8”
调整“录入分隔比例”为“6:12:6”时，中间的“栏”的宽度就会按比例放大，两侧
“栏”的宽度按比例缩小，如图5-70。
图5-70 “录入分隔比例”为“6:12:6”