一种页面适配方法及装置与流程

本发明涉及网络通信领域，尤其涉及一种页面适配方法及装置。

背景技术：

实际中，在制作页面时，根据不同的需求，用户会预先绘制设计稿(即原始设计效果图或设计原型)，然后，开发人员可以根据设计稿来制作页面，进而在不同终端的浏览器上加载该页面，即完成在浏览器(即显示界面)上显示该页面，由于页面尺寸是固定的，对于不同尺寸的移动终端的浏览器在适配上就会存在一些问题。

并且，随着移动终端的日益普及，例如，手机、平板电脑种类也非常多，与传统pc端显示器不同的是，移动终端的分辨率没有统一的标准，各种尺寸、各种屏幕分辨率的移动终端非常多，这样，在不同移动终端的浏览器上显示页面时，传统pc端固定宽度的页面布局方法不再适用，需要一种简单高效的页面适配方法来满足不同分辨率的移动终端。

为了使页面在不同分辨率的移动终端上能够正常显示，给用户舒适的使用体验，现有技术中，页面适配方法大致可分为：响应式布局、viewport缩放、百分比布局等。

(1)响应式布局

建立媒体查询，在制作页面时，编写多套层叠样式表单(cascadingstylesheet，css)样式，针对不同的移动终端的屏幕分辨率设置不同的样式。若新设置浏览器大小，页面也会根据浏览器的宽度和高度重新渲染页面。

(2)窗口(viewport)缩放

通过动态设置页面meta标签的scale值，整体缩放页面的尺寸，使页面能恰好适应屏幕宽度。但此方案在某些移动终端上显示会有异常，部分图片会由于移动终端的原因变模糊，在日常开发中使用较少。

(3)百分比布局

将页面宽度均匀分成100份，页面中每个容器或元素用百分比来定义宽度。在css样式表中，使用百分比作为单位，这样页面中的容器和元素均可以按照固定的比例进行显示，能较好的适应不同的移动终端上浏览器的宽度。若仅需对页面大致进行水平方向的区域划分，该方案能够较好的满足需求。

虽然现有技术中上述几种页面适配方法可以满足一定的需求，但是，也都存在不同的劣势和缺陷，尤其是在要求对页面进行精确还原的场景下，上述几种方法均不能很好地满足需求，具体为：

(1)响应式布局。该方法工作量较大，可能是其他页面适配方法的数倍，开发周期长，效率较低，并且难于维护，并且，若要做到精准适配，则需要编写多套样式。

(2)viewport缩放。在部分移动终端上显示异常，一般较少使用。

(3)百分比布局。无法根据不同移动终端上浏览器的宽度精确定义在显示时页面中各个容器或元素的宽度，造成最后在浏览器上显示的页面与原始的设计稿不符，极端情况下，显示的页面中元素会重叠在一起，造成页面混乱。

由此可见，现有技术中，页面适配方法实现比较复杂并且无法做到在不同移动终端的显示界面上精确还原设计稿的效果。

技术实现要素：

本发明实施例提供一种页面适配方法及装置，以更加简单、高效并能精确还原设计原型，来实现在不同移动终端上的页面适配。

本发明实施例提供的具体技术方案如下：

一种页面适配方法，包括：

获取显示界面的宽度；

根据所述显示界面的宽度和预定义的计算方式，计算页面中根元素在所述显示界面上显示时对应的大小；其中，所述计算方式为，根据预设的所述页面对应的原始效果图的宽度、预设的换算关系和所述显示界面的宽度进行计算；所述换算关系表示，所述页面中元素的单位与所述原始效果图中元素的单位之间的比例换算；

根据所述页面中根元素在所述显示界面上显示时对应的大小，将所述页面显示于所述显示界面上。

本发明实施例中，获取显示界面的宽度；根据所述显示界面的宽度和预定义的计算方式，计算页面中根元素在所述显示界面上显示时对应的大小；其中，所述计算方式为，根据预设的所述页面对应的原始效果图的宽度、预设的换算关系和所述显示界面的宽度进行计算；所述换算关系表示，所述页面中元素的单位与所述原始效果图中元素的单位之间的比例换算；根据所述页面中根元素在所述显示界面上显示时对应的大小，将所述页面显示于所述显示界面上，这样，页面中元素的单位为统一的单位，更为简单方便，并且，建立简单的换算关系，不需要建立多重样式来适配不同分辨率的终端，只需一次开发设计，使得页面在显示界面上显示时，能够精确还原原始效果图，并可以适配所有的终端，既降低了人力成本，又减少了开发周期，同时后期维护也更加简单方便。

较佳的，所述预设的所述页面对应的原始效果图的宽度，是根据预知的各个终端的分辨率确定的，并所述原始效果图中元素的单位为px。

较佳的，所述页面中元素的单位，为rem，并所述换算关系为1rem＝100px。

这样，页面中所有元素的单位为统一的单位，均采用rem定义，能够精确还原原始效果图，进行等比例缩放；并建立简单的换算关系，运算简单方便。

较佳的，根据所述显示界面的宽度和预定义的计算方式，计算页面中根元素在所述显示界面上显示时对应的大小，具体包括：

其中，所述显示界面的宽度为x、预设的所述页面对应的原始效果图的宽度为y和预设的换算关系为1rem＝100px，页面中根元素在所述显示界面上显示时对应的大小为z，则z＝100*(x/y)。

一种页面适配装置，包括：

获取单元，用于获取显示界面的宽度；

计算单元，用于根据所述显示界面的宽度和预定义的计算方式，计算页面中根元素在所述显示界面上显示时对应的大小；其中，所述计算方式为，根据预设的所述页面对应的原始效果图的宽度、预设的换算关系和所述显示界面的宽度进行计算；所述换算关系表示，所述页面中元素的单位与所述原始效果图中元素的单位之间的比例换算；

显示单元，用于根据所述页面中根元素在所述显示界面上显示时对应的大小，将所述页面显示于所述显示界面上。

本发明实施例中，获取显示界面的宽度；根据所述显示界面的宽度和预定义的计算方式，计算页面中根元素在所述显示界面上显示时对应的大小；其中，所述计算方式为，根据预设的所述页面对应的原始效果图的宽度、预设的换算关系和所述显示界面的宽度进行计算；所述换算关系表示，所述页面中元素的单位与所述原始效果图中元素的单位之间的比例换算；根据所述页面中根元素在所述显示界面上显示时对应的大小，将所述页面显示于所述显示界面上，这样，页面中元素的单位为统一的单位，更为简单方便，并且，建立简单的换算关系，不需要建立多重样式来适配不同分辨率的终端，只需一次开发设计，使得页面在显示界面上显示时，能够精确还原原始效果图，并可以适配所有的终端，既降低了人力成本，又减少了开发周期，同时后期维护也更加简单方便。

较佳的，所述预设的所述页面对应的原始效果图的宽度，是根据预知的各个终端的分辨率确定的，并所述原始效果图中元素的单位为px。

较佳的，所述页面中元素的单位，为rem，并所述换算关系为1rem＝100px。

这样，页面中所有元素的单位为统一的单位，均采用rem定义，能够精确还原原始效果图，进行等比例缩放；并建立简单的换算关系，运算简单方便。

较佳的，根据所述显示界面的宽度和预定义的计算方式，计算页面中根元素在所述显示界面上显示时对应的大小时，计算单元具体用于：

其中，所述显示界面的宽度为x、预设的所述页面对应的原始效果图的宽度为y和预设的换算关系为1rem＝100px，页面中根元素在所述显示界面上显示时对应的大小为z，则z＝100*(x/y)。

附图说明

图1为本发明实施例中，页面适配方法概述流程图；

图2为本发明实施例中，页面适配方法详细流程图；

图3为本发明实施例中，页面适配装置结构示意图。

具体实施方式

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

为了能够更加简单、高效并能精确还原设计原型，来实现在不同移动终端上的页面适配，本发明实施例中，设置页面中元素的单位，并建立页面对应的原始效果图中元素的单位与页面中元素的单位之间的换算关系，根据该换算关系，编写页面样式，即设计页面中元素的大小和布局，当在显示界面上显示时，根据显示界面的宽度、原始效果图的宽度和该换算关系，确定页面中根元素在显示界面上显示时对应的大小，进而将页面显示于该显示界面上。

下面通过具体实施例对本发明方案进行详细描述，当然，本发明并不限于以下实施例。

参阅图1所示，本发明实施例中，页面适配方法的具体流程如下：

步骤100：获取显示界面的宽度。

实际中，移动终端与传统pc端不同，其类型非常多，移动终端的屏幕的尺寸、分辨率也多种多样，移动终端的屏幕分辨率并没有统一的标准，在不同移动终端上的显示界面显示页面时，需要进行页面适配，以便能够更好地在显示界面上显示页面。

其中，上述移动终端，可以为手机、平板电脑等设备，本发明实施例中并不进行限制。

当然，执行本发明实施例中的页面适配方法，并不仅限于上述移动终端，也可以是传统的pc端，本发明实施例中并不进行限制，可以是任意可以显示页面的设备，以下统称为终端。

本发明实施例中，当在显示界面上显示页面时，首先需要获取该终端的显示界面的宽度，例如，页面引入javascript脚本，使用javascript脚本获取显示界面的宽度。

步骤110：根据所述显示界面的宽度和预定义的计算方式，计算页面中根元素在所述显示界面上显示时对应的大小；其中，所述计算方式为，根据预设的所述页面对应的原始效果图的宽度、预设的换算关系和所述显示界面的宽度进行计算；所述换算关系表示，所述页面中元素的单位与所述原始效果图中元素的单位之间的比例换算。

执行步骤110时，首先值得说明以下几个方面：

第一方面：预设的页面对应的原始效果图的宽度，是根据预知的各个终端的分辨率确定的，并所述原始效果图中元素的单位为px。

本发明实施例中，可以根据当前主流的各个终端的分辨率来确定原始效果图的宽度，例如针对iphone4、iphone5，可以将原始效果图的宽度设置为640px，针对iphone6、大部分安卓手机，则可以将原始效果图的宽度设置为750px，针对大屏手机，则可以将原始效果图的宽度设置为1080px。

较佳的，本发明实施例中，确定原始效果图的宽度为750px，这样既可以兼容640px宽度的终端，也基本能够满足高分辨率终端的显示要求，当然，具体地原始效果图的宽度，本发明实施例中，并不进行限制，可以根据实际需求进行设置。

第二方面：预设的页面中元素的单位为rem。

本发明实施例中，在页面制作时，即在css中编写样式时，页面中所有元素的单位均设置为rem，包括容器、文字、图片、图标、表单等，并且除元素的大小的单位外，各个元素之间的位置关系也需使用rem定义，例如，css中的margin、padding、top、left等。

第三方面：预设的页面中元素的单位与原始效果图中元素的单位之间的换算关系为1rem＝100px。

实际中，通常会设置页面根元素的字体大小(font-size)＝62.5％，相当于1rem＝10px。但由于有些浏览器不支持小于12px的字体大小，所以本发明实施例中，定义页面中根元素的font-size＝100px，这样1rem就等于原始效果图中的100px，几乎可以适应所有浏览器。

例如，原始效果图的宽度为640px，则就可以定义页面中最外层容器的宽度为6.4rem。

又例如，原始效果图中某元素宽高均为50px，则页面中该元素的宽高均可设置为0.5rem。

这样，本发明实施例中，建立该换算关系，不仅解决部分浏览器不支持文字小于10px的问题，而且运算简单，计算量非常小，只需将原始效果图中元素的大小除以100即可，能够根据原始效果图，快速编写页面样式，得到页面中元素的大小和布局。

值得说明是，当然也可以建立页面中元素的单位与原始效果图中元素的单位之间的其它的换算关系，本发明实施例中并不严格进行限制，只要该换算关系比较简单，同样能够达到本发明实施例的目的，均应属于本发明要保护的范围。

执行步骤110时，具体包括：

其中，显示界面的宽度为x、原始效果图的宽度为y和上述换算关系为1rem＝100px，页面中根元素在上述显示界面上显示时对应的大小为z，则z＝100*(x/y)。

例如，显示界面的宽度为640px，原始效果图的宽度为750px，则将页面显示在该显示界面上时，重新设置页面中根元素的font-size的大小，将页面中根元素的font-size取值进行单位转换，则z＝100*(640/750)。

步骤120：根据所述页面中根元素在所述显示界面上显示时对应的大小，将所述页面显示于所述显示界面上。

具体地，根据页面中根元素在显示界面上显示时的font-size值，将上述页面中元素的大小进行相应调整，进而将上述页面显示在上述显示界面上。

也就是说，本发明实施例中，页面适配方法并不是缩放整个页面，而是页面上所有的尺寸都是与根元素(html)的字体大小相关，计算出页面中根元素在显示界面上显示时对应的大小，进而根据根元素在显示界面上的大小进行相应调整，实现页面在显示界面上的显示。

这样，页面就可以随着显示界面的宽度变化而进行完美适配，并且页面中所有元素的大小和位置均会按照原始效果图进行等比例缩放，可以精确还原原始效果图的设计；并且，实现非常简单，不需要建立多重样式来适配不同分辨率的终端，只需一次开发设计，就可以适配所有的终端，既降低了人力成本，又减少了开发周期，同时后期维护也更加简单方便。

下面采用一个具体的应用场景对上述实施例作出进一步详细说明。从页面设计开发到页面在终端上适配的整个过程，具体参阅图2所示，本发明实施例中，页面适配方法的执行过程具体如下：

步骤200：确定页面对应的原始效果图的宽度，并原始效果图中元素的单位为px。

步骤201：确定页面中元素的单位为rem。

步骤202：建立页面中元素的单位与原始效果图中元素的单位之间的换算关系。

较佳的，该换算关系为1rem＝100px。

步骤203：根据原始效果图和上述换算关系，制作页面。

即在编写页面样式时，页面中所有元素、元素之间的位置关系和布局，均根据原始效果图进行等比例缩放，页面中元素的单位定义为rem。

步骤204：获取显示界面的宽度。

步骤205：根据显示界面的宽度、原始效果图的宽度和上述换算关系，计算页面中根元素在显示界面上显示时的对应的大小。

步骤206：根据页面中根元素在显示界面上显示时对应的大小，将该页面显示于显示界面上。

基于上述实施例，参阅图3所示，本发明实施例中，页面适配装置，具体包括：

获取单元30，用于获取显示界面的宽度；

计算单元31，用于根据所述显示界面的宽度和预定义的计算方式，计算页面中根元素在所述显示界面上显示时对应的大小；其中，所述计算方式为，根据预设的所述页面对应的原始效果图的宽度、预设的换算关系和所述显示界面的宽度进行计算；所述换算关系表示，所述页面中元素的单位与所述原始效果图中元素的单位之间的比例换算；

显示单元32，用于根据所述页面中根元素在所述显示界面上显示时对应的大小，将所述页面显示于所述显示界面上。

较佳的，所述预设的所述页面对应的原始效果图的宽度，是根据预知的各个终端的分辨率确定的，并所述原始效果图中元素的单位为px。

较佳的，所述页面中元素的单位，为rem，并所述换算关系为1rem＝100px。

较佳的，根据所述显示界面的宽度和预定义的计算方式，计算页面中根元素在所述显示界面上显示时对应的大小时，计算单元31具体用于：

其中，所述显示界面的宽度为x、预设的所述页面对应的原始效果图的宽度为y和预设的换算关系为1rem＝100px，页面中根元素在所述显示界面上显示时对应的大小为z，则z＝100*(x/y)。

综上所述，本发明实施例中，获取显示界面的宽度；根据所述显示界面的宽度和预定义的计算方式，计算页面中根元素在所述显示界面上显示时对应的大小；其中，所述计算方式为，根据预设的所述页面对应的原始效果图的宽度、预设的换算关系和所述显示界面的宽度进行计算；所述换算关系表示，所述页面中元素的单位与所述原始效果图中元素的单位之间的比例换算；根据所述页面中根元素在所述显示界面上显示时对应的大小，将所述页面显示于所述显示界面上，这样，页面中元素的单位为统一的单位，更为简单方便，并且，建立简单的换算关系，不需要建立多重样式来适配不同分辨率的终端，只需一次开发设计，使得页面在显示界面上显示时，能够精确还原原始效果图，并可以适配所有的终端，既降低了人力成本，又减少了开发周期，同时后期维护也更加简单方便。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

显然，本领域的技术人员可以对本发明实施例进行各种改动和变型而不脱离本发明实施例的精神和范围。这样，倘若本发明实施例的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。