[发明专利]网页响应式布局方法

说明书

本发明公开了一种网页响应式布局方法、介质及设备，其中方法包括：获取用户发送的网页访问请求，并根据网页访问请求向用户的浏览设备发送相应的网页文件，其中，网页文件中包含网页对应的布局计算模块代码和布局约束数据；浏览设备获取网页文件，并执行布局计算模块代码，以启动布局计算模块；通过布局计算模块根据浏览设备的尺寸信息和布局约束数据进行布局计算，以得到浏览设备对应的布局位置信息；根据布局位置信息对网页显示进行更新；能够实现在不同浏览设备上对网页进行准确地布局，保证网页的视觉效果，提高用户的交互体验。

技术领域

本发明涉及网页布局技术领域，特别涉及一种网页响应式布局方法、一种计算机可读存储介质和一种计算机设备。

背景技术

在浏览器网页界面开发领域中，为了让网页内容适应不同尺寸的浏览设备(例如，手机、平板和电脑等)；需要根据浏览设备的特征为网页内容设置不同的布局和外观。

相关技术中，多采用层叠样式表进行网页的布局和外观的声明。但是，在网页中，有些页面视觉元素是直接由脚本控制位置，而有些是在画布中绘制的；无法被层叠样式表控制位置；进而导致视觉元素在不同设备上展示时，出现显示位置不准确、难以交互和视觉效果不佳等问题。

发明内容

本发明旨在至少在一定程度上解决上述技术中的技术问题之一。为此，本发明的一个目的在于提出一种网页响应式布局方法，能够实现在不同浏览设备上对网页进行准确地布局，保证网页的视觉效果，提高用户的交互体验。

本发明的第二个目的在于提出一种计算机可读存储介质。

本发明的第三个目的在于提出一种计算机设备。

为达到上述目的，本发明第一方面实施例提出了一种网页响应式布局方法，包括以下步骤：获取用户发送的网页访问请求，并根据所述网页访问请求向所述用户的浏览设备发送相应的网页文件，其中，所述网页文件中包含所述网页对应的布局计算模块代码和布局约束数据；所述浏览设备获取所述网页文件，并执行所述布局计算模块代码，以启动布局计算模块；通过所述布局计算模块根据所述浏览设备的尺寸信息和所述布局约束数据进行布局计算，以得到所述浏览设备对应的布局位置信息；根据所述布局位置信息对网页显示进行更新。

根据本发明实施例的网页响应式布局方法，首先，获取用户发送的网页访问请求，以根据用户发送的网页访问请求向用户的浏览设备发送对应的网页文件；其中，该网页文件中傲寒网页所对应的布局计算模块代码和布局约束数据；接着，浏览设备获取网页文件，并执行网页文件中的布局计算模块代码，以执行该布局计算模块；该布局计算模块根据用户的浏览设备的尺寸信息和布局约束数据对网页进行布局计算，以计算得到网页的布局位置信息；进而，根据该布局位置信息对网页显示进行更新；从而实现在不同浏览设备上对网页进行准确地布局，保证网页的视觉效果，提高用户的交互体验。

另外，根据本发明上述实施例提出的网页响应式布局方法还可以具有如下附加的技术特征：

可选地，所述布局约束数据包括多个数组，每个所述数组包括多个数组子元素，以通过数组子元素描述网页中相应视觉元素的约束条件。

可选地，所述视觉元素的约束条件包括数组子元素对应的浏览设备特征信息、数组子元素对应的视觉元素唯一标识、视觉元素的尺寸信息、视觉元素不参与布局计算时的位置信息。

可选地，所述视觉元素包括容器视觉元素和子视觉元素，所述容器视觉元素用于承载所述子视觉元素。

可选地，所述布局约束数据还包括容器视觉元素对于子视觉元素的承载方式、所述子视觉元素在容器视觉元素上的对齐方式、所述子视觉元素尺寸变化时的伸缩信息、所述子视觉元素被排版时的排序。

可选地，所述视觉元素的父子层级关系通过树状数据结构表达。