一种实现页面自适应布局的方法技术

本申请公开了一种实现页面自适应布局的方法

【技术实现步骤摘要】
一种实现页面自适应布局的方法、装置、设备及介质


[0001]本申请涉及计算机
，具体涉及一种实现页面自适应布局的方法
、
装置
、
设备及介质
。

技术介绍

[0002]用户在使用前端进行应用页面的显示时，存在着在不同终端设备和
/
或在不同尺寸的窗口中呈现同一个应用页面的需求，如果应用页面中显示的内容不能随前端显示设备的屏幕宽度进行调整，可能会影响页面中内容的显示
。
为了使应用页面在不同尺寸的显示设备上显示，可以使用自适应布局技术，自适应设计能够使页面自适应地显示在不同大小的终端设备上
。
[0003]目前常用的页面自适应场景多为响应式布局，可以预先定义多个屏幕断点，然后根据不同断点范围的屏幕大小，编写不同的页面显示方式
。
通过媒体查询技术查询当前屏幕的尺寸大小，从而调用相应的页面显示方式来显示页面，实现页面在不同屏幕的响应式布局
。
但是响应式布局的方式需要针对不同的屏幕尺寸设置多套不同的页面显示方式，配置复杂度本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种实现页面自适应布局的方法，其特征在于，所述方法包括：响应于针对待显示页面的触发操作，获取所述待显示页面的页面布局编辑控件；响应于选择所述页面布局编辑控件中预设显示规则的操作，根据所述预设显示规则控制所述待显示页面的内容随屏幕视口的宽度变化在所述屏幕视口进行完整显示
。2.
根据权利要求1所述的方法，其特征在于，所述待显示页面包括一个组件，当所述预设显示规则为伸展规则时，所述根据所述预设显示规则控制所述待显示页面的内容随屏幕视口的宽度变化在所述屏幕视口进行完整显示，包括：获取所述组件的第一预设尺寸；当所述屏幕视口的宽度大于所述第一预设尺寸时，基于所述屏幕视口的宽度调整所述组件的显示尺寸
。3.
根据权利要求1所述的方法，其特征在于，所述待显示页面包括多个组件，所述多个组件初始时在所述屏幕视口并列显示，当所述预设显示规则为伸展规则时，所述根据所述预设显示规则控制所述待显示页面的内容随屏幕视口的宽度变化在所述屏幕视口进行完整显示，包括：获取所述多个组件中每个组件所分别对应的预设尺寸；根据所述屏幕视口的宽度以及所述每个组件所分别对应的预设尺寸，确定所述屏幕视口每行最大容纳所述多个组件中的至少一个组件；控制所述至少一个组件在同一行进行显示，并基于所述屏幕视口的宽度调整所述至少一个组件的显示尺寸；控制所述多个组件中除所述至少一个组件外的其余组件换行显示
。4.
根据权利要求3所述的方法，其特征在于，所述控制所述多个组件中除所述至少一个组件外的其余组件换行显示，包括：根据所述屏幕视口的宽度以及所述其余组件所分别对应的预设尺寸，确定所述屏幕视口每行最大容纳所述其余组件中的至少一个组件；控制该至少一个组件在下一行显示，并基于所述屏幕视口的宽度调整该至少一个组件的显示尺寸，以此类推，直至基于所述屏幕视口的宽度调整所述多个组件的显示尺寸
。5.
根据权利要求3所述的方法，其特征在于，所述控制所述至少一个组件在同一行进行显示，并基于所述屏幕视口的宽度调整所述至少一个组件的显示尺寸，包括：根据所述屏幕视口的宽度以及所述至少一个组件所分别对应的历史宽度，确定多余宽度；基于所述多余宽度以及所述至少一个组件的个数，确定所述至少一个组件中每个组件增加的宽度；基于所述至少一个组件中每个组件所对应的历史宽度以及增...

【专利技术属性】
技术研发人员：汪江文，缐育博，杨洋，
申请(专利权)人：北京字跳网络技术有限公司，
类型：发明
国别省市：