CN110866208B - 一种页面的响应式布局方法、装置及设备 - Google Patents

Abstract

本申请公开一种页面的响应式布局方法、装置及设备，所述页面由承载有页面元素的容器构成，所述方法包括：为所述页面中的预设容器分别添加观察者；其中，所述观察者用于监测对应预设容器的布局相关元素是否发生尺寸变化；当接收到来自任一观察者的尺寸变化消息后，对所述观察者对应的容器进行重新布局。本申请通过为各个预设容器分别设置观察者，实现对各个预设容器的布局相关元素是否发生尺寸变化的监测，并在接收到任一观察者发送的尺寸变化消息后，为该观察者对应的容器重新布局。本申请能够灵活适用于各种场景的响应式布局，且从容器的粒度进行尺寸变化的监测，不需要对整个网页进行重新布局，降低资源开销。

Description

一种页面的响应式布局方法、装置及设备

技术领域

本申请涉及数据处理领域，具体涉及一种页面的响应式布局方法、装置及设备。

背景技术

响应式布局，是指实现不同屏幕分辨率的终端对网页的不同展示方式。通过响应式布局能使用户在手机和平板电脑等终端上有更好的网站浏览体验。换句话说就是一个网站能够兼容多个终端，而不是为每一个终端分别做一个特定的版本。

目前，用于实现页面的响应式布局的方法需要预先对不同屏幕分辨率进行枚举，分别定义多套适用于不同屏幕分辨率的样式，在不同的终端上浏览网站可以调用对应的样式实现页面的响应式布局。

显然，上述方式实现复杂，且灵活性不够，因此，亟需一种灵活适用于各种场景的响应式布局方案。

发明内容

有鉴于此，本申请提供了一种页面的响应式布局方法、装置及设备，能够灵活适用于各种场景的响应式布局，且从容器的粒度进行尺寸变化的监测，不需要对整个网页进行重新布局，降低资源开销。

第一方面，为实现上述发明目的，本申请提供了一种页面的响应式布局方法，所述页面由承载有页面元素的容器构成，所述方法包括：

为所述页面中的预设容器分别添加观察者；其中，所述观察者用于监测对应预设容器的布局相关元素是否发生尺寸变化；

当接收到来自任一观察者的尺寸变化消息后，对所述观察者对应的容器进行重新布局。

一种可选的实施方式中，所述为所述页面中的预设容器分别添加观察者，包括：

在所述页面初始化的阶段，按照所述页面中各个预设容器的初始化顺序，为所述页面中的各个预设容器分别添加观察者。

一种可选的实施方式中，所述预设容器的布局相关元素包括所述预设容器的上一层元素。

一种可选的实施方式中，所述预设容器包括自适应容器，所述自适应容器中内置有配置占比的自适应子容器；所述占比为占所述自适应容器的高度的百分比；

所述当接收到来自任一观察者的尺寸变化消息后，对所述观察者对应的容器进行重新布局，具体为：

当接收到来自所述自适应容器对应的观察者的尺寸变化消息后，对所述自适应容器进行重新布局；

相应的，所述方法还包括：

依据所述占比和重新布局后的所述自适应容器，对所述自适应子容器进行重新布局。

一种可选的实施方式中，所述预设容器还包括固定高子容器，所述固定高子容器内置于所述自适应容器；所述固定高子容器的所述布局相关元素为内部数据元素；

所述当接收到来自任一观察者的尺寸变化消息后，对所述观察者对应的容器进行重新布局，具体为：

当接收到来自所述固定高子容器对应的观察者的尺寸变化消息后，对所述固定高子容器进行重新布局；

相应的，所述方法还包括：

依据所述占比、所述自适应容器和重新布局后的所述固定高子容器，对所述自适应子容器进行重新布局。

一种可选的实施方式中，所述当接收到来自任一观察者的尺寸变化消息后，对所述观察者对应的容器进行重新布局，包括：

当接收到来自任一观察者的尺寸变化消息后，在所述页面的下一次渲染之后，对所述观察者对应的容器进行重新布局。

第二方面，本申请还提供了一种页面的响应式布局装置，所述页面由承载有页面元素的容器构成，所述装置包括：

添加模块，用于为所述页面中的预设容器分别添加观察者；其中，所述观察者用于监测对应预设容器的布局相关元素是否发生尺寸变化；

第一布局模块，用于在接收到来自任一观察者的尺寸变化消息后，对所述观察者对应的容器进行重新布局。

一种可选的实施方式中，所述添加模块，具体用于：

在所述页面初始化的阶段，按照所述页面中各个预设容器的初始化顺序，为所述页面中的各个预设容器分别添加观察者。

一种可选的实施方式中，所述预设容器的布局相关元素包括所述预设容器的上一层元素。

一种可选的实施方式中，所述预设容器包括自适应容器，所述自适应容器中内置有配置占比的自适应子容器；所述占比为占所述自适应容器的高度的百分比；

所述第一布局模块，具体用于：

当接收到来自所述自适应容器对应的观察者的尺寸变化消息后，对所述自适应容器进行重新布局；

相应的，所述装置还包括：

第二布局模块，用于依据所述占比和重新布局后的所述自适应容器，对所述自适应子容器进行重新布局。

一种可选的实施方式中，所述预设容器还包括固定高子容器，所述固定高子容器内置于所述自适应容器；所述固定高子容器的所述布局相关元素为内部数据元素；

所述第一布局模块，具体用于：

当接收到来自所述固定高子容器对应的观察者的尺寸变化消息后，对所述固定高子容器进行重新布局；

相应的，所述装置还包括：

第三布局模块，用于依据所述占比、所述自适应容器和重新布局后的所述固定高子容器，对所述自适应子容器进行重新布局。

一种可选的实施方式中，所述第一布局模块，具体用于：

在接收到来自任一观察者的尺寸变化消息后，在所述页面的下一次渲染之后，对所述观察者对应的容器进行重新布局。

第三方面，本申请提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当所述指令在终端设备上运行时，使得所述终端设备执行如上述任一项所述的方法。

第四方面，本申请提供了一种页面的响应式布局设备，包括：存储器，处理器，及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时，实现如上述任一项所述的方法。

本申请提供了一种页面的响应式布局方法，通过为各个预设容器分别设置观察者，实现对各个预设容器的布局相关元素是否发生尺寸变化的监测，并在接收到任一观察者发送的尺寸变化消息后，为该观察者对应的容器重新布局。本申请实施例能够灵活适用于各种场景的响应式布局，且从容器的粒度进行尺寸变化的监测，不需要对整个网页进行重新布局，降低资源开销。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例提供的一种页面的响应式布局方法的流程图；

图2为本申请实施例提供的一种容器结构的示意图；

图3为本申请实施例提供的另一种页面的响应式布局方法的流程图；

图4为本申请实施例提供的一种容器的树结构示意图；

图5为本申请实施例提供的又一种页面的响应式布局方法的流程图；

图6为本申请实施例提供的一种页面的响应式布局装置的结构示意图；

图7为本申请实施例提供的一种页面的响应式布局设备的结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

目前，传统页面的响应式布局方法是使用@media媒体查询方式来实现的，具体的，为不同屏幕分辨率的终端分别定义对应的样式，以便在不同的终端上浏览网站可以调用对应的样式实现页面的响应式布局。这种对不同屏幕分辨率进行枚举的方式显然灵活性不足，且实现相对复杂。

另外，@media媒体查询方式还存在其他问题，具体的，该方式是基于浏览器视口的尺寸变化触发页面的响应式布局，也就是说，只有在监测到浏览器视口发生尺寸变化时，才会触发页面的响应式布局，那么，对于仅页面上的某些元素等发生尺寸变化，则该方法是不能实现响应式布局的。

为此，本申请的发明人从页面中用于承载页面元素的容器的粒度进行尺寸变化的监测，并仅针对将发生尺寸变化的容器进行重新布局，不需要对整个网页进行重新布局，降低资源开销。

以下本申请实施例提供了一种页面的响应式布局方法，该方法应用于网站前端，其中，页面由承载有页面元素的容器构成，参考图1，为本申请实施例提供的一种页面的响应式布局方法流程图，该方法包括：

S101：为所述页面中的预设容器分别添加观察者；其中，所述观察者用于监测对应预设容器的布局相关元素是否发生尺寸变化。

本申请实施例中，网站的页面由承载有页面元素容器构成。为了实现对将发生尺寸变化的容器的重新布局，本申请实施例需要监测容器的布局相关元素是否发生尺寸变化，以便在其发生尺寸变化后对该容器进行重新布局，提高用户浏览页面的体验。

本申请实施例中，通过为预设容器分别增加观察者，实现监测对应预设容器的布局相关元素是否发生尺寸变化的功能。

resizeObserver是现有的一种用于实现观察者的程序，具体为用于观察或注意事物的程序，观察者可以在观察到浏览器中发生的某些事情后做出相应的响应。一种实现方式中，可以为页面中的预设容器分别添加resizeObserver，用于监测对应预设容器的布局相关元素是否发生尺寸变化。

本申请实施例中，容器通常包括需要响应式布局的容器和不需要响应式布局的容器，其中，预设容器即为需要响应式布局的容器，而不需要响应式布局的容器是指高度设置为固定像素值的容器，该容器下的所有页面元素均不会触发重新布局。一种可选的实施方式中，在页面初始化的阶段，按照页面中预设容器的初始化顺序，为页面中需要响应式布局的容器分别添加观察者。

另外，由于容器是否需要重新布局一般是受上一层元素的影响的，因此容器的观察者可以用于对该容器的上一层元素是否发生尺寸变量。具体的，对于存在父容器的容器而言，其作为布局相关元素的上一层元素为父容器，具体的，该容器的观察者用于监测其父容器是否发生尺寸变化；对于不存在父容器的容器而言，其作为布局相关元素的上一层元素为浏览器的Body元素，具体的，该容器的观察者用于监测浏览器的Body元素是否发生尺寸变化。

实际应用中，当浏览器尺寸发生变化时，浏览器的Body元素发生尺寸变化，则上一层元素为浏览器的Body元素的容器对应的观察者监测到浏览器的Body元素的尺寸变化后，触发该容器的重新布局。另外，当在不同屏幕分辨率的终端上打开网页时，观察者也会监测到容器的相关布局元素发生尺寸变化，从而触发对应的容器的重新布局。值得注意的是，本申请实施例适用的场景不作限制。

S102：当接收到来自任一观察者的尺寸变化消息后，对所述观察者对应的预设容器进行重新布局。

本申请实施例中，当任一观察者监测到对应的预设容器发生尺寸变化后，向网站前端发送尺寸变化消息。网站前端在接收到该尺寸变化消息后，对该观察者对应的预设容器进行重新布局。

一种可选的实施方式中，当至少两个观察者同时向网站前端发送尺寸变化消息时，网站前端对该至少两个观察者分别对应预设容器的重新布局顺序是由为各个预设容器添加观察者的顺序决定的。具体的，先添加观察者的预设容器优先重新布局。为此，当具有父子关系的两个预设容器的观察者同时向网站前端发送尺寸变化消息时，为避免优先对子节点容器进行重新布局导致因父节点容器重新布局而引起子节点容器的再次布局，因此，本申请实施例优先对父节点容器进行重新布局，然后再对子节点容器进行重新布局。为实现上述方案，本申请实施例优先为父节点容器添加观察者，其次为子节点容器添加观察者。

一种可选的实施方式中，由于页面初始化的顺序是基于容器的树结构的，父节点容器优先于子节点容器完成初始化，因此，本申请实施例可以在页面初始化的阶段，按照页面中各个预设容器的初始化顺序，为页面中的各个预设容器分别添加观察者，以保证优先对父节点容器进行重新布局，然后再对子节点容器进行重新布局。

值得强调的是，本申请实施例中对预设容器进行重新布局是指重新计算预设容器的宽和高，而并非对预设容器内的页面元素进行显示内容的重新布局。由于预设容器的宽度通常比较固定，因此，本申请实施例主要是对预设容器的高度重新计算，实现对预设容器的重新布局。

本申请实施例提供的网页的响应式布局方法中，通过为各个预设容器分别设置观察者，实现对各个预设容器的布局相关元素是否发生尺寸变化的监测，并在接收到任一观察者发送的尺寸变化消息后，为该观察者对应的容器重新布局。本申请实施例能够灵活适用于各种场景的响应式布局，且从容器的粒度进行尺寸变化的监测，不需要对整个网页进行重新布局，降低资源开销。

本申请实施例提供的页面的响应式布局方法能够应用于各种网站的页面中，以图2中的一种容器结构为例，其中，网站的任一页面中包括自适应容器，该自适应容器为外部容器，自适应容器可以包括一个或多个自适应子容器和一个或多个固定高子容器，图2中以包括一个固定高子容器和两个自适应子容器的自适应容器为例，各个自适应子容器配置有占自适应容器的高度的百分比，一种可选的实施方式中，各个自适应子容器的占比是指占自适应容器除去固定高子容器的高度的比例。而固定高子容器的高度由内部数据元素的高度决定。其中，本申请实施例中需要设置观察者的预设容器包括自适应容器和固定高子容器，也就是说，本申请实施例中分别为自适应容器和固定高子容器配置观察者。另外，自适应容器的布局相关元素为上一层元素，而固定高子容器的布局相关元素为内部数据元素。

以下为对本申请实施例提供的页面的响应式布局方法的具体介绍。参考图3，为本申请实施例提供的另一种页面的响应式布局方法的流程图。该方法包括：

S301：为所述页面中的自适应容器和固定高子容器分别添加观察者；其中，所述观察者用于监测对应预设容器的布局相关元素是否发生尺寸变化。

具体的，为自适应容器添加的观察者用于检测该自适应容器的上一层元素是否发生尺寸变化，例如，如果该自适应容器存在上一层容器，则该自适应容器的上一层元素为其上一层容器；如果该自适应容器不存在上一层容器，即为根节点容器，则该自适应容器的上一层元素为浏览器的body元素。

另外，为固定高子容器添加的观察者用于检测该固定高子容器的内部数据元素是否发生尺寸变化。其中，内部数据元素可以为文本、图片等形式，在此不做限制。

S302：当接收到来自所述自适应容器对应的观察者的尺寸变化消息后，对所述自适应容器进行重新布局。

S303：依据所述占比和重新布局后的所述自适应容器，对所述自适应子容器进行重新布局。

由于自适应子容器配置有占自适应容器的高度的百分比，因此，自适应容器的高度因重新布局发生变化，会导致自适应子容器的高度也发生变化。因此，本申请实施例在对自适应容器进行重新布局后，依据该自适应容器配置的占比乘以重新布局后自适应容器的高度，实现对该自适应子容器的重新布局。

S304：当接收到来自所述固定高子容器对应的观察者的尺寸变化消息后，对所述固定高子容器进行重新布局。

S305：依据各个自适应子容器的占比、自适应容器和重新布局后的所述固定高子容器，对各个自适应子容器进行重新布局。

由于自适应子容器的高度与自适应容器和固定高子容器的高度均有关，因此，一旦固定高子容器进行重新布局，则会导致自适应子容器也进行重新布局。具体的，依据自适应子容器的占比、自适应容器和重新布局后的固定高子容器，对自适应子容器进行重新布局。

实际应用中，某个容器的重新布局会导致下一层容器的观察者检测到该容器的相关布局元素存在尺寸变化，依次循环，最终会导致该容器各级子节点容器均重新布局，直到完成叶子节点容器的重新布局。

图4为一种容器的树结构示意图，针对图中的根节点容器a的相关布局元素发生尺寸变化的应用场景，本申请实施例提供了一种页面的响应式布局方法，参考图5，为本申请实施例提供的又一种页面的响应式布局方法流程图。

该方法包括：

S501：为容器a、b、c、d分别添加观察者。

S502：当接收到来自容器a的观察者的尺寸变化消息后，对容器a进行重新布局。

S503：由于容器a的重新布局，导致容器b、c的观察者监测到容器b、c的相关布局元发生尺寸变化。

S504：当接收到来自容器b、c的观察者的尺寸变化消息后，对容器b、c进行重新布局。

S505：由于容器b的重新布局，导致容器d的观察者监测到容器d的相关布局元发生尺寸变化。

S506：当接收到来自容器d的观察者的尺寸变化消息后，对容器d进行重新布局。

通过上述实现方式，能够完成树结构中各个容器的重新布局。具体的，通过为各个预设容器分别设置观察者，实现对各个预设容器的布局相关元素是否发生尺寸变化的监测，并在接收到任一观察者发送的尺寸变化消息后，为该观察者对应的容器重新布局。本申请实施例能够灵活适用于各种场景的响应式布局，且从容器的粒度进行尺寸变化的监测，不需要对整个网页进行重新布局，降低资源开销。

一种可选的实现方式中，观察者的触发周期为浏览器的渲染周期，而一旦观察者监测到容器的相关布局元素发生尺寸变化，前端页面即执行对该容器的重新布局，则会导致因当前周期同步执行重新布局和页面渲染造成页面卡顿现象的发生，因此，本申请实施例中，前端页面在接收到来自任一观察者的尺寸变化后，在对页面进行下一次渲染之后，对该观察者对应的容器进行重新布局，以避免重新布局和页面渲染同步执行造成页面卡顿现象的发生。

与上述方法实施例相对应的，本申请还提供了一种页面的响应式布局装置，参考图6，为本申请实施例提供的一种页面的响应式布局装置的结构示意图，所述页面由承载有页面元素的容器构成，该装置包括：

添加模块601，用于为所述页面中的预设容器分别添加观察者；其中，所述观察者用于监测对应预设容器的布局相关元素是否发生尺寸变化；

第一布局模块602，用于在接收到来自任一观察者的尺寸变化消息后，对所述观察者对应的容器进行重新布局。

其中，所述添加模块，具体用于：

在所述页面初始化的阶段，按照所述页面中各个预设容器的初始化顺序，为所述页面中的各个预设容器分别添加观察者。

所述预设容器的布局相关元素包括所述预设容器的上一层元素。

一种可选的实施方式中，所述预设容器包括自适应容器，所述自适应容器中内置有配置占比的自适应子容器；所述占比为占所述自适应容器的高度的百分比；

所述第一布局模块，具体用于：

当接收到来自所述自适应容器对应的观察者的尺寸变化消息后，对所述自适应容器进行重新布局；

相应的，所述装置还包括：

第二布局模块，用于依据所述占比和重新布局后的所述自适应容器，对所述自适应子容器进行重新布局。

另一种可选的实施方式中，所述预设容器还包括固定高子容器，所述固定高子容器内置于所述自适应容器；所述固定高子容器的所述布局相关元素为内部数据元素；

所述第一布局模块，具体用于：

当接收到来自所述固定高子容器对应的观察者的尺寸变化消息后，对所述固定高子容器进行重新布局；

相应的，所述装置还包括：

第三布局模块，用于依据所述占比、所述自适应容器和重新布局后的所述固定高子容器，对所述自适应子容器进行重新布局。

其中，所述第一布局模块，具体用于：

在接收到来自任一观察者的尺寸变化消息后，在所述页面的下一次渲染之后，对所述观察者对应的容器进行重新布局。

本申请实施例提供的网页的响应式布局装置，通过为各个预设容器分别设置观察者，实现对各个预设容器的布局相关元素是否发生尺寸变化的监测，并在接收到任一观察者发送的尺寸变化消息后，为该观察者对应的容器重新布局。本申请实施例能够灵活适用于各种场景的响应式布局，且从容器的粒度进行尺寸变化的监测，不需要对整个网页进行重新布局，降低资源开销。

另外，本申请实施例还提供了一种页面的响应式布局设备，参见图7所示，可以包括：

处理器701、存储器702、输入装置703和输出装置704。页面的响应式布局设备中的处理器701的数量可以一个或多个，图7中以一个处理器为例。在本发明的一些实施例中，处理器701、存储器702、输入装置703和输出装置704可通过总线或其它方式连接，其中，图7中以通过总线连接为例。

存储器702可用于存储软件程序以及模块，处理器701通过运行存储在存储器702的软件程序以及模块，从而执行页面的响应式布局设备的各种功能应用以及数据处理。存储器702可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等。此外，存储器702可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。输入装置703可用于接收输入的数字或字符信息，以及产生与页面的响应式布局设备的用户设置以及功能控制有关的信号输入。

具体在本实施例中，处理器701会按照如下的指令，将一个或一个以上的应用程序的进程对应的可执行文件加载到存储器702中，并由处理器701来运行存储在存储器702中的应用程序，从而实现上述页面的响应式布局方法中的各种功能。

另外，本申请还提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当所述指令在终端设备上运行时，使得所述终端设备执行上述的页面的响应式布局方法。

可以理解的是，对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上对本申请实施例所提供的一种页面的响应式布局方法、装置及设备进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (9)

1.一种页面的响应式布局方法，其特征在于，所述页面由承载有页面元素的容器构成，所述方法包括：

为所述页面中的预设容器分别添加观察者；其中，所述观察者用于监测对应预设容器的布局相关元素是否发生尺寸变化；

当接收到来自任一观察者的尺寸变化消息后，对所述观察者对应的容器进行重新布局；

所述预设容器包括自适应容器，所述自适应容器中内置有配置占比的自适应子容器；所述占比为占所述自适应容器的高度的百分比；

所述当接收到来自任一观察者的尺寸变化消息后，对所述观察者对应的容器进行重新布局，具体为：

当接收到来自所述自适应容器对应的观察者的尺寸变化消息后，对所述自适应容器进行重新布局；

相应的，所述方法还包括：

依据所述占比和重新布局后的所述自适应容器，对所述自适应子容器进行重新布局。

2.根据权利要求1所述的方法，其特征在于，所述为所述页面中的预设容器分别添加观察者，包括：

在所述页面初始化的阶段，按照所述页面中各个预设容器的初始化顺序，为所述页面中的各个预设容器分别添加观察者。

3.根据权利要求1或2所述的方法，其特征在于，所述预设容器的布局相关元素包括所述预设容器的上一层元素。

4.根据权利要求1所述的方法，其特征在于，所述预设容器还包括固定高子容器，所述固定高子容器内置于所述自适应容器；所述固定高子容器的所述布局相关元素为内部数据元素；

所述当接收到来自任一观察者的尺寸变化消息后，对所述观察者对应的容器进行重新布局，具体为：

当接收到来自所述固定高子容器对应的观察者的尺寸变化消息后，对所述固定高子容器进行重新布局；

相应的，所述方法还包括：

依据所述占比、所述自适应容器和重新布局后的所述固定高子容器，对所述自适应子容器进行重新布局。

5.根据权利要求1所述的方法，其特征在于，所述当接收到来自任一观察者的尺寸变化消息后，对所述观察者对应的容器进行重新布局，包括：

当接收到来自任一观察者的尺寸变化消息后，在所述页面的下一次渲染之后，对所述观察者对应的容器进行重新布局。

6.一种页面的响应式布局装置，其特征在于，所述页面由承载有页面元素的容器构成，所述装置包括：

添加模块，用于为所述页面中的预设容器分别添加观察者；其中，所述观察者用于监测对应预设容器的布局相关元素是否发生尺寸变化；

第一布局模块，用于在接收到来自任一观察者的尺寸变化消息后，对所述观察者对应的容器进行重新布局；

所述预设容器包括自适应容器，所述自适应容器中内置有配置占比的自适应子容器；所述占比为占所述自适应容器的高度的百分比；

所述第一布局模块，具体用于：

当接收到来自所述自适应容器对应的观察者的尺寸变化消息后，对所述自适应容器进行重新布局；

相应的，所述装置还包括：

第二布局模块，用于依据所述占比和重新布局后的所述自适应容器，对所述自适应子容器进行重新布局。

7.根据权利要求6所述的装置，其特征在于，所述添加模块，具体用于：

在所述页面初始化的阶段，按照所述页面中各个预设容器的初始化顺序，为所述页面中的各个预设容器分别添加观察者。

8.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有指令，当所述指令在终端设备上运行时，使得所述终端设备执行如权利要求1-5任一项所述的方法。

9.一种页面的响应式布局设备，其特征在于，包括：存储器，处理器，及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时，实现如权利要求1-5任一项所述的方法。

Images