网页布局方法及装置制造方法及图纸

本发明专利技术涉及一种网页布局方法及装置。该方法包括：获取浏览器的当前窗口大小；计算浏览器的当前窗口大小与第一预设值的第一比值；将第一比值与基准值的乘积确定为网页的根元素的字体大小的当前值；根据当前值以及网页的各个元素相对于网页的根元素的字体大小的倍数，确定网页的各个元素的大小；根据确定的网页的各个元素的大小显示网页。本发明专利技术通过预先将网页的各个元素的大小设置为网页的根元素的字体大小的倍数，在客户端进行网页布局时，只需根据浏览器的当前窗口大小调整网页的根元素的字体大小，而无需分别调整网页的每个元素的大小，能够减少网页布局中为兼容各种客户端、各种浏览器产生的工作量，提高网页布局效率，并降低网页加载时间。

【技术实现步骤摘要】

本专利技术涉及信息
，尤其涉及一种网页布局方法及装置。
技术介绍
原生App(Application，应用)针对iOS、Android和Windows等不同的操作系统要采用不同的语言和框架进行开发。相对于原生App，HTML(HyperText Markup Language，超文本标记语言)5页面具有传播性强、开发简单以及快速上线、无需在客户端升级等优点，非常适合轻量级App和推广页面。为了使网页能够兼容各种终端设备，而不是为每种终端设备分别设计特定的版本，Ethan Marcotte在2010年5月提出了响应式布局的概念。现有的响应式布局技术是通过Media Queries(媒体查询)获取终端设备的尺寸，再根据终端设备的尺寸调整网页中的每个元素的尺寸。这种响应式布局技术为了兼容各种终端设备而产生的工作量较大、效率较低下且网页的加载时间较长。
技术实现思路
技术问题有鉴于此，本专利技术要解决的技术问题是，现有的网页布局技术在兼容各种终端设备时由于要调整每个元素的尺寸而产生的工作量较大、效率较低下且网页的加载时间较长。解决方案为了解决上述技术问题，根据本专利技术的一实施例，提供了一种网页布局方法，包括：获取浏览器的当前窗口大小；计算所述浏览器的当前窗口大小与第一预设值的第一比值，所述第一预设值为预先设置的所述浏览器的初始窗口大小；将所述第一比值与基准值的乘积确定为所述网页的根元素的字体大小的当前值，其中，所述基准值为所述网页的根元素的字体大小的初始值；根据所述当前值以及所述网页的各个元素相对于所述网页的根元素的字体大小的倍数，确定所述网页的各个元素的大小；根据确定的所述网页的各个元素的大小显示所述网页。对于上述方法，在一种可能的实现方式中，获取浏览器的当前窗口大小，包括：在请求获取所述网页的情况下，获取所述浏览器的当前窗口大小；和/或，在检测到所述浏览器的当前窗口大小发生变化的情况下，获取所述浏览器的当前窗口大小。对于上述方法，在一种可能的实现方式中，获取浏览器的当前窗口大小，具体为：获取所述浏览器的当前窗口宽度；计算所述浏览器的当前窗口大小与第一预设值的第一比值，具体为：计算所述浏览器的当前窗口宽度与所述第一预设值的所述第一比值；所述第一预设值，具体为：预先设置的所述浏览器的初始窗口宽度。对于上述方法，在一种可能的实现方式中，根据所述当前值以及所述网页的各个元素相对于所述网页的根元素的字体大小的倍数，确定所述网页的各个元素的大小，包括：将所述当前值与所述网页的各个元素相对于所述网页的根元素的字体大小的倍数的乘积确定为所述网页的各个元素的大小。对于上述方法，在一种可能的实现方式中，根据所述当前值以及所述网页的各个元素相对于所述网页的根元素的字体大小的倍数，确定所述网页的各个元素的大小，包括：将所述当前值与所述网页的预设标签相对于所述网页的根元素的字体大小的倍数的乘积确定为第一参数；根据所述第一参数加载所述预设标签，并获取加载的所述预设标签的大小；若加载的所述预设标签的大小不在第一区间内，则计算所述第一参数与加载的所述预设标签的大小的第二比值，将所述当前值与所述第二比值的乘积确定为调整值，并将所述调整值与所述网页的各个元素相对于所述网页的根元素的字体大小的倍数的乘积确定为所述网页的各个元素的大小，其中，所述第一区间根据所述第一参数确定，所述第一参数在所述第一区间内；若加载的所述预设标签的大小在所述第一区间内，则将所述当前值与所述网页的各个元素相对于所述网页的根元素的字体大小的倍数的乘积确定为所述网页的各个元素的大小。为了解决上述技术问题，根据本专利技术的另一实施例，提供了一种网页布局装置，包括：当前窗口大小获取模块，用于获取浏览器的当前窗口大小；第一比值计算模块，用于计算所述浏览器的当前窗口大小与第一预设值的第一比值，所述第一预设值为预先设置的所述浏览器的初始窗口大小；当前值确定模块，用于将所述第一比值与基准值的乘积确定为所述网页的根元素的字体大小的当前值，其中，所述基准值为所述网页的根元素的字体大小的初始值；元素大小确定模块，用于根据所述当前值以及所述网页的各个元素相对于所述网页的根元素的字体大小的倍数，确定所述网页的各个元素的大小；显示模块，用于根据确定的所述网页的各个元素的大小显示所述网页。对于上述装置，在一种可能的实现方式中，所述当前窗口大小获取模块包括：第一当前窗口大小获取子模块，用于在请求获取所述网页的情况下，获取所述浏览器的当前窗口大小；和/或，第二当前窗口大小获取子模块，用于在检测到所述浏览器的当前窗口大小发生变化的情况下，获取所述浏览器的当前窗口大小。对于上述装置，在一种可能的实现方式中，所述当前窗口大小获取模块具体用于：获取所述浏览器的当前窗口宽度；所述第一比值计算模块具体用于：计算所述浏览器的当前窗口宽度与所述第一预设值的所述第一比值；所述第一预设值，具体为：预先设置的所述浏览器的初始窗口宽度。对于上述装置，在一种可能的实现方式中，所述元素大小确定模块具体用于：将所述当前值与所述网页的各个元素相对于所述网页的根元素的字体大小的倍数的乘积确定为所述网页的各个元素的大小。对于上述装置，在一种可能的实现方式中，所述元素大小确定模块包括：第一参数确定子模块，用于将所述当前值与所述网页的预设标签相对于所述网页的根元素的字体大小的倍数的乘积确定为第一参数；标签大小获取子模块，用于根据所述第一参数加载所述预设标签，并获取加载的所述预设标签的大小；第一元素大小确定子模块，用于若加载的所述预设标签的大小不在第一区间内，则计算所述第一参数与加载的所述预设标签的大小的第二比值，将所述当前值与所述第二比值的乘积确定为调整值，并将所述调整值与所述网页的各个元素相对于所述网页的根元素的字体大小的倍数的乘积确定为所述网页的各个元素的大小，其中，所述第一区间根据所述第一参数确定，所述第一参数在所述第一区间内；第二元素大小确定子模块，用于若加载的所述预设标签的大小在所述第一区间内，则将所述当前值与所述网页的各个元素相对于所述网页的根元素的字体大小的倍数的乘积确定为所述网页的各个元素的大小。有益效果通过预先将网页的各个元素的大小设置为网页的根元素的字体大小的倍数，在客户端进行网页布局时，只需根据浏览器的当前窗口大小调整网页的根元素的字体大小，而无需分别调整网页的每个元素的大小，根据本专利技术实施例的网页布局方法及装置能够减少网页布局中为兼容各种客户端、各种浏览器产生的工作量，提高网页布局效率，并降低网页加载时间。根据下面参考附图对示例性实施例的详细说明，本专利技术的其它特征及方面将变得清楚。附图说明包含在说明书中并且构成说明书的一部分的附图与说明书一起示出了本专利技术的示例性实施例、特征和方面，并且用于解释本专利技术的原理。图1示出根据本专利技术一实施例的网页布局方法的实现流程图；图2示出根据本专利技术一实施例的网页布局方法的一示例性的实现流程图；图3示出根据本专利技术一实施例的网页布局方法步骤S104的一示例性的具体实现流程图；图4示出根据本专利技术一实施例的网页布局装置的结构框图；图5示出根据本专利技术一实施例的网页布局装置的一示例性的结构框图；图6示出根据本专利技术另一实施例的网页布局装置的一示例性的结构框图。具体实施方式以下将参考附图详细说明本文档来自技高网...

【技术保护点】
一种网页布局方法，其特征在于，包括：获取浏览器的当前窗口大小；计算所述浏览器的当前窗口大小与第一预设值的第一比值，所述第一预设值为预先设置的所述浏览器的初始窗口大小；将所述第一比值与基准值的乘积确定为所述网页的根元素的字体大小的当前值，其中，所述基准值为所述网页的根元素的字体大小的初始值；根据所述当前值以及所述网页的各个元素相对于所述网页的根元素的字体大小的倍数，确定所述网页的各个元素的大小；根据确定的所述网页的各个元素的大小显示所述网页。

【技术特征摘要】
1.一种网页布局方法，其特征在于，包括：获取浏览器的当前窗口大小；计算所述浏览器的当前窗口大小与第一预设值的第一比值，所述第一预设值为预先设置的所述浏览器的初始窗口大小；将所述第一比值与基准值的乘积确定为所述网页的根元素的字体大小的当前值，其中，所述基准值为所述网页的根元素的字体大小的初始值；根据所述当前值以及所述网页的各个元素相对于所述网页的根元素的字体大小的倍数，确定所述网页的各个元素的大小；根据确定的所述网页的各个元素的大小显示所述网页。2.根据权利要求1所述的方法，其特征在于，获取浏览器的当前窗口大小，包括：在请求获取所述网页的情况下，获取所述浏览器的当前窗口大小；和/或，在检测到所述浏览器的当前窗口大小发生变化的情况下，获取所述浏览器的当前窗口大小。3.根据权利要求1所述的方法，其特征在于，获取浏览器的当前窗口大小，具体为：获取所述浏览器的当前窗口宽度；计算所述浏览器的当前窗口大小与第一预设值的第一比值，具体为：计算所述浏览器的当前窗口宽度与所述第一预设值的所述第一比值；所述第一预设值，具体为：预先设置的所述浏览器的初始窗口宽度。4.根据权利要求1至3任意一项所述的方法，其特征在于，根据所述当前值以及所述网页的各个元素相对于所述网页的根元素的字体大小的倍数，确定所述网页的各个元素的大小，包括：将所述当前值与所述网页的各个元素相对于所述网页的根元素的字体大小的倍数的乘积确定为所述网页的各个元素的大小。5.根据权利要求1至3任意一项所述的方法，其特征在于，根据所述当前值以及所述网页的各个元素相对于所述网页的根元素的字体大小的倍数，确定所述网页的各个元素的大小，包括：将所述当前值与所述网页的预设标签相对于所述网页的根元素的字体大小的倍数的乘积确定为第一参数；根据所述第一参数加载所述预设标签，并获取加载的所述预设标签的大小；若加载的所述预设标签的大小不在第一区间内，则计算所述第一参数与加载的所述预设标签的大小的第二比值，将所述当前值与所述第二比值的乘积确定为调整值，并将所述调整值与所述网页的各个元素相对于所述网页的根元素的字体大小的倍数的乘积确定为所述网页的各个元素的大小，其中，所述第一区间根据所述第一参数确定，所述第一参数在所述第一区间内；若加载的所述预设标签的大小在所述第一区间内，则将所述当前值与所述网页的各个元素相对于所述网页的根元素的字体大小的倍数的乘积确定为所述网页的各个元素的大小。6.一种网页布局装置，其特征在于，包...

【专利技术属性】
技术研发人员：唐元屈，戴洵，白云龙，张宏涛，杨伟东，潘柏宇，王冀，
申请(专利权)人：合一网络技术北京有限公司，
类型：发明
国别省市：北京;11