自适应调整的界面流式布局显示的方法和系统

摘要

本申请公开了自适应调整的界面流式布局显示的方法和系统，方法包括：检测运行该浏览器的终端系统的分辨率值；根据分辨率值，将在页面中预先设定像素值的单元格构建成竖向排列且布满页面的栅格；读取栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与栅格横向方向总像素值的对应关系，调整视频缩略图和视频分类标签的尺寸；在栅格上将调整后的视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示。本发明解决了页面中视频缩略的布局散乱且视频缩略图尺寸在较高分辨率下产生缩减的问题。

主权项

一种自适应调整的界面流式布局显示的方法，其特征在于，包括：检测运行浏览器的终端系统的分辨率值；根据所述分辨率值，将在页面中预先设定像素值的单元格构建成竖向排列且布满所述页面的栅格，当屏幕分辨率值出现大幅增加时，栅格单元均相应的增加；读取所述栅格横向方向的总像素值，并在不同的屏幕尺寸数值下以长度为1024像素的分辨率值为基准值，划定所述页面中视频缩略图的基准显示列数，并以该基准显示列数为定值获取不同分辨率值下所述视频缩略图的尺寸比例，建立所述视频缩略图的该基准显示列数与所述栅格横向方向总像素值的对应关系，根据所述对应关系调整所述视频缩略图和视频分类标签的尺寸；在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示；进一步为：在所述栅格上将调整后的所述视频分类标签置于最左侧，将对应该视频标签的调整后的所述视频缩略图按照从左至右的方式依次横向排列于所述视频标签右侧，构成多个横向平行设置的火车流形式的视频分类行进行显示。