响应式布局

应用窗口在特定场景需要考虑响应式布局；

我们建议5种典型响应式布局方式：

1、横向拉伸布局

2、等比缩放布局

3、延伸布局

4、浮动布局

5、分栏布局；

开发者可根据自己的业务需求，自由组合使用。

1. 横向拉伸布局

适用场景：

适用于文本、卡片、列表等内容呈现式布局。

适配方法：

1.宽度自适应，元素大小不变，仅仅相对距离均分；导航保持原有距离，不按照相对距离均分

2.拉伸达到一定临界点时，内容区域不再拉伸，两侧留白区域拉伸

适用场景：

适用于图片、卡片、视频等在大屏下展现友好的内容布局。

适配策略：

1.在拉伸过程中，图片、卡片等比例缩放

2.界面中的文字、按钮等元素大小可保持不变或使用延伸等方式布局

适用场景：

适用于信息流内容展现的延伸式布局（如：卡片等），即随屏幕变宽，展现内容数量增加。

适配策略：

1.在窗口变宽时，对于原本折行显示的内容，可以在横向空间内延伸显示。延伸的具体个数，取决于窗口宽度、单条内容显示尺寸

2.窗口拉伸过程中，单条内容显示大小可保持不变，内容间距可均等分配；直到空白区可完整显示下一条内容

适用场景：

信息架构为多层级、应用内多任务并行、需要有快速跳转切换、有持续型内容呈现（如媒体播放）、辅助效率工具类等。

适配策略：

1.根据使用场景需要，在拉伸的过程中进行响应式布局，当宽度超过某一临界值时，出现分栏

2.大屏展示时，最左侧显示一级导航，右侧依次显示第二级、三级的展开内容

3.根据具体业务，可选择分两栏或三栏

适用场景：

浮动布局一般适用于内容呈现型场景，且有明显的内容分组布局时使用。

适配策略：

1.从小屏窗口变为大屏窗口的过程中，将不同模块内容从上下排列改为左右排列

2.浮动的模块数量、显示尺寸，可根据具体业务数据来定