[发明专利]页面布局方法及装置

说明书

本公开涉及页面布局方法及装置。该方法包括：通过层叠样式表的媒体查询器获取页面的可见区域的宽度；在所述页面中的目标对象的宽度与所述可见区域的宽度不匹配的情况下，通过所述层叠样式表调整所述目标对象的宽度，以使所述目标对象的宽度与所述可见区域的宽度相匹配。本公开通过层叠样式表的媒体查询器获取页面的可见区域的宽度，并在页面中的目标对象的宽度与可见区域的宽度不匹配的情况下，通过层叠样式表调整目标对象的宽度，以使目标对象的宽度与可见区域的宽度相匹配，由此能够通过层叠样式表实现响应式页面布局，从而能够保证页面的运行效率，保证页面速度，避免出现页面卡顿的情况。

技术领域

本公开涉及计算机技术领域，尤其涉及一种页面布局方法及装置。

背景技术

相关技术中，通过JavaScript实时监控浏览器宽度。当监控到的浏览器宽度满足预先设定的宽度条件时，通过JavaScript修改DOM(Document Object Model，文档对象模型)属性，即修改Body(主体)的class(类别)属性。这种通过JavaScript修改Body的class属性来实现响应式页面布局的方法的运行效率较低，容易出现页面卡顿的情况，拖慢页面速度。

发明内容

有鉴于此，本公开提出了一种页面布局方法及装置，以解决通过JavaScript修改Body的class属性来实现响应式页面布局的方法的运行效率较低的问题。

根据本公开的一方面，提供了一种页面布局方法，包括：

通过层叠样式表的媒体查询器获取页面的可见区域的宽度；

在所述页面中的目标对象的宽度与所述可见区域的宽度不匹配的情况下，通过所述层叠样式表调整所述目标对象的宽度，以使所述目标对象的宽度与所述可见区域的宽度相匹配。

在一种可能的实现方式中，通过所述层叠样式表调整所述目标对象的宽度，包括：

获取与所述可见区域的宽度相匹配的所述目标对象的目标宽度；

通过所述层叠样式表将所述目标对象的宽度逐渐调整至所述目标宽度，其中，调整所述目标对象的宽度的持续时间等于第一时长。

在一种可能的实现方式中，通过所述层叠样式表将所述目标对象的宽度逐渐调整至所述目标宽度，包括：

在所述第一时长内，通过所述层叠样式表将所述目标对象的宽度匀速调整至所述目标宽度。

在一种可能的实现方式中，获取与所述可见区域的宽度相匹配的所述目标对象的目标宽度，包括：

确定所述可见区域的宽度所属的宽度区间；

获取与所述宽度区间对应的所述目标对象的目标宽度，并将与所述宽度区间对应的所述目标对象的目标宽度作为与所述可见区域的宽度相匹配的所述目标对象的目标宽度。

在一种可能的实现方式中，所述方法还包括：

在所述目标对象的宽度与所述可见区域的宽度不匹配的情况下，通过所述层叠样式表调整所述目标对象的高度，以使所述目标对象的高度与所述可见区域的宽度相匹配。

根据本公开的另一方面，提供了一种页面布局装置，包括：

第一获取模块，用于通过层叠样式表的媒体查询器获取页面的可见区域的宽度；

第一调整模块，用于在所述页面中的目标对象的宽度与所述可见区域的宽度不匹配的情况下，通过所述层叠样式表调整所述目标对象的宽度，以使所述目标对象的宽度与所述可见区域的宽度相匹配。

在一种可能的实现方式中，所述第一调整模块包括：

获取子模块，用于获取与所述可见区域的宽度相匹配的所述目标对象的目标宽度；