技术领域

本发明涉及网站页面转码技术领域，特别涉及 一种网页自适应布局方法 及装置。

背景技术 现如今， 移动终端越来越普及， 但是现在桌面设备仍占有不少的用户比 例， 因此目前互联网中的大部分网页还是针对桌面 设备设计的。 因此需要对 原网页的组织结构及网页的样式进行修改，使 网页转换后可以普遍适用于各 种移动终端。

现有的技术主要是通过将一个桌面设备的网页 转换成一个适应于移动 设备的固定的网页， 因此至少存在以下问题：

( 1 ) 网页宽度只能适应一种屏幕大小的移动终端， 不能普遍适应；

( 2 ) 网页布局不能够自动调整， 无法根据终端屏幕的改变而进行相应 的动态的改变。

发明内容 本发明旨在至少解决上述技术问题之一。

为此， 本发明的第一个目的在于提出一种网页自适应 布局方法。

本发明的第二个目的在于提出一种网页自适应 布局装置。

为了实现上述目的，根据本发明的第一方面实 施例的网页自适应布局方 法包括以下步骤： 将 web网页的宽度调整为适应多个移动终端屏幕的 宽度； 将所述 web网页的字体大小修改为适应所述多个移动终 端屏幕的字体大小； 以及使得所述 web网页上不同的分块可以滑动。

根据本发明实施例的网页自适应布局方法， 通过设定屏幕宽度与字体大 小能够自动适应屏幕， 使得网页能够适应于各种移动终端， 提高了网页的适 用性并增强了用户的体验感。

为实现上述目的， 本发明第二方面的实施例的网页自适应布局装 置包 括： 宽度调整模块， 所述宽度调整模块用于将 web 网页的宽度调整为适应 多个手机屏幕的宽度； 字体调整模块， 字体调整模块用于将所述 web 网页 的字体大小修改为适应所述多个手机屏幕的字 体大小； 以及滑动模块， 所述 滑动模块用于使得所述 _we b网页上不同的分块可以滑动。

根据本发明实施例的网页自适应布局装置， 通过宽度调整模块字体调整 模块以及滑动模块使网页布局能够自动适应移 动终端的大小，提高了网页的 适用性并增强了用户的体验感。

本发明的附加方面和优点将在下面的描述中部 分给出，部分将从下面的 描述中变得明显， 或通过本发明的实践了解到。

附围说明 本发明上述的和 /或附加的方面和优点从下面结合附图对实施� �的描述 中将变得明显和容易理解， 其中：

图 1为根据本发明一个实施例的一种网页自适应� �局方法的流程图； 图 2为根据本发明一个实施例的一种网页自适应� �局方法的流程图； 图 3为根据本发明一个实施例的一种网页自适应� �局方法的流程图； 图 4为根据本发明一个实施例的网页自适应布局� �置的结构示意图； 图 5为根据本发明一个实施例的网页自适应布局� �置的结构示意图；以 及

图 6为根据本发明一个实施例的网页自适应布局� �置的结构示意图。

具体实施方式 下面详细描述本发明的实施例， 所述实施例的示例在附图中示出， 其中 自始至终相同或类似的标号表示相同或类似的 元件或具有相同或类似功能 的元件。 下面通过参考附图描述的实施例是示例性的， 仅用于解释本发明， 而不能解释为对本发明的限制。

参照下面的描述和附图， 将清楚本发明的实施例的这些和其他方面。 在 这些描述和附图中， 具体公开了本发明的实施例中的一些特定实施 方式， 来 表示实施本发明的实施例的原理的一些方式， 但是应当理解， 本发明的实施 例的范围不受此限制。相反， 本发明的实施例包括落入所附加权利要求书的 精神和内涵范围内的所有变化、 修改和等同物。 下面参考说明书附图描述根据本发明实施例的 网页自适应布局方法。 一种网页自适应布局方法， 包括以下步骤： 将 web 网页的宽度调整为 适应多个移动终端屏幕的宽度； 将 web 网页的字体大小修改为适应多个移 动终端屏幕的字体大小； 以及使得 web网页上不同的分块可以滑动。 。

图 1为本发明一个实施例的网页自适应布局方法� �流程图。 步骤 S 101 : 将 web网页的宽度调整为适应多个移动终端屏幕的 宽度。 具体地，将 web网页中以 **px为单位的宽度按照预定规则替换成 **%或 替换成自动宽度。

更具体地， 先通过对 head 元素中可视区域的 meta 标签 <meta name=" viewport" content="width=device-width, initial-scale=l " />进行设置, 将 width设定为 device-width, 则将网页的宽度被设置为设备的屏幕宽度， 然后设定 initial-scale=l , 即缩放比例设置为一，使网页初始化能够按照 屏幕 的宽度大小初始化， 而不会以放大或是缩小比例的屏幕宽度初始化 ， 其中<meta> 元素可提供有关页面的元信息 ( meta- information ) 。

然后将网页中的宽度固定大小 * * p x 设定按照预定的规则替换成 * * %或 者直接修改为自动宽度。

步骤 S102: 将 web 网页的字体大小修改为适应多个移动终端屏幕 的字 体大小。

具体地， 首先删除 web网页中 "font-size： **px" ( font-size: 字体大小； px: 像素） ；然后计算 web网页的基准大小并将基准大小设置在 body ( body 是 html的一种标签， body包含文档的所有内容， 例如文本、 超链接、 图像、 表格和列表等）中；最后将 web网页的其余部分的大小通过 "font-size: **em" ( em表示当前的字体尺寸） 进行修改。

更具体地， 将 web网页中的字体样式中设定的固定字体大小 "font-size: **px"给删除， 再通过基于统计的方法将 web网页的基准大小计算出来， 然 后将这个大小设置在网页的正体 body内， 其他部分的字体大小通过设定字 体大小 "font-size: **em "来设定， em单位代表基准大小的同等大小， 则字体 大小为基准大小的相对单位大小。

步骤 S 103 : 使得 web网页上不同的分块可以滑动。

具体地， 首先对 web网页上不同的分块加上 float ( ess的一种， 设置标 签的滑动属性）属性； 然后删除固定位置信息。 更具体地， 通过在 css (层叠样式表： Cascading Style Sheets )样式中给 web页面中不同的模块加上浮动 float属性， 然后再删除分块属性中固定的 位置设定的信息，让各个分块可以按照根据页 面大小不同进行滑动形成流式 布局。

在本发明的一个实施例中， 多个移动终端屏幕的宽度包括小于等于 320px, 320-480px, 480-800px, 大于等于 800px。

根据本发明实施例的网页自适应布局方法， 通过修改页面宽度和字体大 小为自动适应屏幕大小， 并且页面中的模块会根据页面大小自动滑动， 使得 网页能够自动适应不同移动设备的屏幕而改变 布局，提高了网页的可浏览性 且提升了用户的体验感。

图 2为本发明又一个实施例的网页自适应布局方� �的流程图。 步骤 S201 : 将 web网页的宽度调整为适应多个移动终端屏幕的 宽度。 具体地，将 web网页中以 **px为单位的宽度按照预定规则替换成 **%或 替换成自动宽度。

更具体地， 先通过对 head 元素中可视区域的 meta 标签 <meta name=" viewport" content="width=device-width, initial-scale=l " />进行设置, 将 width设定为 device-width, 则将网页的宽度被设置为设备的屏幕宽度， 然后设定 initial-scale=l , 即缩放比例设置为一，使网页初始化能够按照 屏幕 的宽度大小初始化， 而不会以放大或是缩小比例的屏幕宽度初始化 。 然后将 网页中的宽度固定大小 **px 设定按照预定的规则替换成 **%或者直接修改 为自动宽度。

步骤 S202: 将 web 网页的字体大小修改为适应多个移动终端屏幕 的字 体大小。

具体地， 首先删除 _we b网页中" font-size: **px";然后计算 web网页的基 准大小并将基准大小设置在 body中； 最后将 web网页的其余部分的大小通 过" font-size: **em，，进行修改。

更具体地， 将 web网页中的字体样式中设定的固定字体大小 "font-size: **px"给删除， 再通过基于统计的方法将 web网页的基准大小计算出来， 然 后将这个大小设置在网页的正体 body内， 其他部分的字体大小通过设定字 体大小 "font-size: **em "来设定， em单位代表基准大小的同等大小， 则字体 大小为基准大小的相对单位大小。 步骤 S203 : 使得 web网页上不同的分块可以滑动。

具体地， 首先对 web网页上不同的分块加上 float属性； 然后删除固定 位置信息。

更具体地， 通过在 ess样式中给 web页面中不同的模块加上浮动 float 属性， 然后再分块属性只能怪删除固定的位置设定的 信息， 让各个分块可以 按照根据页面大小不同进行滑动形成流式布局 。

步骤 S204: 根据多个移动终端屏幕的大小加载不同的 ess文件。

具体地， 在 web中添加多种 ess样式文件， web页面在移动终端中初始 化时， 根据移动终端屏幕的大小不同而加载相对应的 ess样式文件。

在本发明的一个实施例中， 多个移动终端屏幕的宽度包括小于等于 320px, 320-480px, 480-800px, 大于等于 800px。

根据本发明实施例的网页自适应布局方法， 通过在页面初始化时加载不 同 CSS样式文件来改变布局展现， 让页面能够适应不同移动终端的屏幕， 提 高了网页的可浏览性以及提升用户的体验感。

图 3为本发明又一个实施例的网页自适应布局方� �的流程图。 步骤 S301 : 将 web网页的宽度调整为适应多个移动终端屏幕的 宽度。 具体地，将 web网页中以 **px为单位的宽度按照预定规则替换成 **%或 替换成自动宽度。

更具体地， 先通过对 head 元素中可视区域的 meta 标签 <meta name=" viewport" content="width=device-width, initial-scale=l " />进行设置, 将 width设定为 device-width, 则将网页的宽度被设置为设备的屏幕宽度， 然后设定 initial-scale=l , 即缩放比例设置为一，使网页初始化能够按照 屏幕 的宽度大小初始化， 而不会以放大或是缩小比例的屏幕宽度初始化 。 然后将 网页中的宽度固定大小 **px 设定按照预定的规则替换成 **%或者直接修改 为自动宽度。

步骤 S302: 将 web 网页的字体大小修改为适应多个移动终端屏幕 的字 体大小。

具体地， 首先删除 _we b网页中" font-size: **px";然后计算 web网页的基 准大小并将基准大小设置在 body中； 最后将 web网页的其余部分的大小通 过" font-size: **em，，进行修改。

更具体地， 将 web网页中的字体样式中设定的固定字体大小 "font-size: **px"给删除， 再通过基于统计的方法将 web网页的基准大小计算出来， 然 后将这个大小设置在网页的正体 body内， 其他部分的字体大小通过设定字 体大小 "font-size: **em "来设定， em单位代表基准大小的同等大小， 则字体 大小为基准大小的相对单位大小。

步骤 S303 : 使得 web网页上不同的分块可以滑动。

具体地， 首先对 web网页上不同的分块加上 float属性； 然后删除固定 位置信息。

更具体地， 通过在 ess样式中给 web页面中不同的模块加上浮动 float 属性， 然后再分块属性只能怪删除固定的位置设定的 信息， 让各个分块可以 按照根据页面大小不同进行滑动形成流式布局 。

步骤 S304: 根据多个移动终端屏幕的大小加载不同的 ess文件。

具体地， 在 web中添加多种 ess样式文件， web页面在移动终端中初始 化时， 根据移动终端屏幕的大小不同而加载相对应的 ess样式文件。

步骤 S305 : 在不同的 ess文件中设置 max-width (定义元素的最大宽度） 属性以改变图片的大小。

具体地， 通过在不同的 ess样式文件中设置图片的最大宽度 max-width 属性来改变图片的显示宽度， 在加载不同的 ess样式文件时， 图片显示出不 同的大小。

在本发明的一个实施例中， 多个移动终端屏幕的宽度包括小于等于 320px, 320-480px, 480-800px, 大于等于 800px。

根据本发明实施例的网页自适应布局方法， 通过在页面初始化时加载不 同 CSS样式文件来页面中图片显示的大小， 让图片显示能够适应不同移动终 端的屏幕， 提高了网页中图片的可浏览性以及提升用户的 体验感。

下面参考说明书附图描述根据本发明实施例的 网页自适应布局装置。 一种网页自适应布局装置包括： 宽度调整模块， 宽度调整模块用于将 web网页的宽度调整为适应多个手机屏幕的宽度 ； 字体调整模块， 字体调整 模块用于将 web 网页的字体大小修改为适应多个手机屏幕的字 体大小； 以 及滑动模块， 滑动模块用于使得 web网页上不同的分块可以滑动。

图 4为本发明一个实施例的网页自适应布局装置� �结构示意图。

如图 4所示， 根据本发明实施例的网页自适应布局装置， 包括： 宽度调 整模块 110、 字体调整模块 120以及滑动模块 130。

具体地， 宽度调整模块 110用于将 web 网页的宽度调整为适应多个手 机屏幕的宽度； 字体调整模块 120用于将 web 网页的字体大小修改为适应 多个手机屏幕的字体大小； 以及滑动模块 130用于使得 web 网页上不同的 分块可以滑动。

在本发明的一个实施例中，宽度调整模块 110用户将 web网页中以 **px 为单位的宽度按照预定规则替换成 **%或替换成自动宽度。

在本发明的一个实施例中， 字体调整模块 120 用于删除 web 网页中 "font-size: **px";然后计算 web 网页的基准大小并将基准大小设置在 body 中； 最后将 web网页的其余部分的大小通过" font-size: **em"进行修改。

在本发明的一个实施例中， 滑动模块 130用于对 web 网页上不同的分 块加上 float属性； 然后删除固定位置信息。

下面结合本发明的实施例举例说明网页自适应 布局装置的工作流程。 例如， 一个 web网页先通过宽度调整模块 110对 head元素中可视区域 的 meta 标 签 <meta name="viewport" content="width=device-width, initial-scale=l " />进行设置， 将 width设定为 device- width, 则将网页的宽度 被设置为设备的屏幕宽度， 然后设定 initial-scale=l , 即缩放比例设置为一， 使网页初始化能够按照屏幕的宽度大小初始化 ，而不会以放大或是缩小比例 的屏幕宽度初始化。 然后将网页中的宽度固定大小 **px 设定按照预定的规 则替换成 **%或者直接修改为自动宽度。 然后通过字体调整模块 120将 web 网页中的字体样式中设定的固定字体大小 "font-size: **px"给删除，再通过基 于统计的方法将 web 网页的基准大小计算出来， 然后将这个大小设置在网 页的正体 body内 ,其他部分的字体大小通过设定字体大小" font-size: **em " 来设定， em单位代表基准大小的同等大小， 则字体大小为基准大小的相对 单位大小。最后通过滑动模块 130在 ess样式中给 web页面中不同的模块加 上浮动 float属性， 然后再分块属性只能怪删除固定的位置设定的 信息， 让 各个分块可以按照根据页面大小不同进行滑动 形成流式布局。

在本发明的一个实施例中， 多个移动终端屏幕的宽度包括小于等于 320px, 320-480px, 480-800px, 大于等于 800px。

根据本发明实施例的网页自适应布局装置， 通过宽度调整模块字体调整 模块以及滑动模块使网页布局能够自动适应移 动终端的大小，使得网页能够 自动适应不同移动设备的屏幕而改变布局，提 高了网页的可浏览性且提升了 用户的体验感。

图 5为本发明另一个实施例的网页自适应布局装� �的结构示意图。 如图 5所示， 根据本发明实施例的网页自适应布局装置， 包括： 宽度调 整模块 110、 字体调整模块 120、 滑动模块 130以及加载模块 140。

具体地， 宽度调整模块 1 10用于将 web 网页的宽度调整为适应多个手 机屏幕的宽度； 字体调整模块 120用于将 web 网页的字体大小修改为适应 多个手机屏幕的字体大小； 以及滑动模块 130用于使得 web 网页上不同的 分块可以滑动；加载模块 140用于根据多个移动终端屏幕的大小加载不同 的

CSS文件。

更具体地， 加载模块 140用于在 web中添加多种 ess样式文件， web页 面在移动终端中初始化时， 根据移动终端屏幕的大小不同而加载相对应的

CSS样式文件。

在本发明的一个实施例中，宽度调整模块 110用户将 web网页中以 **px 为单位的宽度按照预定规则替换成 **%或替换成自动宽度。

在本发明的一个实施例中， 字体调整模块 120 用于删除 web 网页中 "font-size: **px";然后计算 web 网页的基准大小并将基准大小设置在 body 中； 最后将 web网页的其余部分的大小通过" font-size: **em"进行修改。

在本发明的一个实施例中， 滑动模块 130用于对 web 网页上不同的分 块加上 float属性； 然后删除固定位置信息。

下面结合本发明的实施例举例说明网页自适应 布局装置的工作流程。 例如， 一个 web网页先通过宽度调整模块 110对 head元素中可视区域 的 meta 标 签 <meta name="viewport" content="width=device-width, initial-scale=l " />进行设置， 将 width设定为 device-width, 则将网页的宽度 被设置为设备的屏幕宽度， 然后设定 initial-scale=l , 即缩放比例设置为一， 使网页初始化能够按照屏幕的宽度大小初始化 ，而不会以放大或是缩小比例 的屏幕宽度初始化。 然后将网页中的宽度固定大小 **px 设定按照预定的规 则替换成 **%或者直接修改为自动宽度。 然后通过字体调整模块 120将 web 网页中的字体样式中设定的固定字体大小 "font-size: **px"给删除，再通过基 于统计的方法将 web 网页的基准大小计算出来， 然后将这个大小设置在网 页的正体 body内 ,其他部分的字体大小通过设定字体大小" font-size: **em " 来设定， em单位代表基准大小的同等大小， 则字体大小为基准大小的相对 单位大小。最后通过滑动模块 130在 ess样式中给 web页面中不同的模块加 上浮动 float属性， 然后再分块属性只能怪删除固定的位置设定的 信息， 让 各个分块可以按照根据页面大小不同进行滑动 形成流式布局。然后在网页在 移动终端上初始化时，通过加载模块 140来根据移动终端的屏幕大小的不一 样来选择加载不同的 ess样式文件， 将网页以不同的样式布局在不同的移动 终端中展示。

在本发明的一个实施例中， 多个移动终端屏幕的宽度包括小于等于 320px, 320-480px, 480-800px, 大于等于 800px。

根据本发明实施例的网页自适应布局装置， 通过加载模块在页面初始化 时加载不同 CSS样式文件来改变布局展现， 让页面能够适应不同移动终端的 屏幕， 提高了网页的可浏览性以及提升用户的体验感 。

图 6为本发明另一个实施例的网页自适应布局装� �的结构示意图。

如图 6所示， 根据本发明实施例的网页自适应布局装置， 包括： 宽度调 整模块 110、 字体调整模块 120、 滑动模块 130、 加载模块 140 以及设置模 块 150。

具体地， 宽度调整模块 1 10用于将 web 网页的宽度调整为适应多个手 机屏幕的宽度； 字体调整模块 120用于将 web 网页的字体大小修改为适应 多个手机屏幕的字体大小； 以及滑动模块 130用于使得 web 网页上不同的 分块可以滑动；加载模块 140用于根据多个移动终端屏幕的大小加载不同 的 ess文件。设置模块 150用与在不同的 ess文件中设置 max-width属性以改变 图片的大小。

更具体地， 加载模块 140用于在 web中添加多种 ess样式文件， web页 面在移动终端中初始化时， 根据移动终端屏幕的大小不同而加载相对应的 ess样式文件。 设置模块 150通过在不同的 ess样式文件中设置图片的最大 宽度 max-width属性来改变图片的显示宽度，在加载不 同的 ess样式文件时， 图片显示出不同的大小。

在本发明的一个实施例中，宽度调整模块 110用户将 web网页中以 **px 为单位的宽度按照预定规则替换成 **%或替换成自动宽度。

在本发明的一个实施例中， 字体调整模块 120 用于删除 web 网页中 "font-size: **px";然后计算 web 网页的基准大小并将基准大小设置在 body 中； 最后将 web网页的其余部分的大小通过" font-size: **em"进行修改。

在本发明的一个实施例中， 滑动模块 130用于对 web 网页上不同的分 块加上 float属性； 然后删除固定位置信息。

下面结合本发明的实施例举例说明网页自适应 布局装置的工作流程。 例如， 一个 web网页先通过宽度调整模块 110对 head元素中可视区域 的 meta 标 签 <meta name="viewport" content="width=device-width, initial-scale=l " />进行设置， 将 width设定为 device-width, 则将网页的宽度 被设置为设备的屏幕宽度， 然后设定 initial-scale=l , 即缩放比例设置为一， 使网页初始化能够按照屏幕的宽度大小初始化 ，而不会以放大或是缩小比例 的屏幕宽度初始化。 然后将网页中的宽度固定大小 **px 设定按照预定的规 则替换成 **%或者直接修改为自动宽度。 然后通过字体调整模块 120将 web 网页中的字体样式中设定的固定字体大小 "font-size: **px"给删除，再通过基 于统计的方法将 web 网页的基准大小计算出来， 然后将这个大小设置在网 页的正体 body内 ,其他部分的字体大小通过设定字体大小" font-size: **em " 来设定， em单位代表基准大小的同等大小， 则字体大小为基准大小的相对 单位大小。最后通过滑动模块 130在 ess样式中给 web页面中不同的模块加 上浮动 float属性， 然后再分块属性只能怪删除固定的位置设定的 信息， 让 各个分块可以按照根据页面大小不同进行滑动 形成流式布局。然后在网页在 移动终端上初始化时，通过加载模块 140来根据移动终端的屏幕大小的不一 样来选择加载不同的 ess样式文件， 将网页以不同的样式布局在不同的移动 终端中展示。

在本发明的一个实施例中， 多个移动终端屏幕的宽度包括小于等于 320px, 320-480px, 480-800px, 大于等于 800px。 根据本发明实施例的网页 自适应布局装置，

根据本发明实施例的网页自适应布局方法， 通过设置模块 150在页面初 始化时加载不同 ess样式文件来页面中图片显示的大小， 让图片显示能够适 应不同移动终端的屏幕，提高了网页中图片的 可浏览性以及提升用户的体验 感。

在本说明书的描述中，参考术语"一个实施例"� �� "一些实施例"、 "示例"、 "具体示例"、 或"一些示例"等的描述意指结合该实施例或示� ��描述的具体特 征、 结构、 材料或者特点包含于本发明的至少一个实施例 或示例中。 在本说 明书中，对上述术语的示意性表述不一定指的 是相同的实施例或示例。而且， 描述的具体特征、 结构、材料或者特点可以在任何的一个或多个 实施例或示 例中以合适的方式结合。

尽管已经示出和描述了本发明的实施例，对于 本领域的普通技术人员而 言，可以理解在不脱离本发明的原理和精神的 情况下可以对这些实施例进行 多种变化、修改、替换和变型，本发明的范围 由所附权利要求及其等同限定。