CN109614099A - 自适配页面视图的开发方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本申请实施例提供一种自适配页面视图的开发方法、装置、计算机设备及存储介质。所述方法包括：获取可视窗口的宽度和高度；根据所述可视窗口的宽度和高度计算可视窗口单位，其中，所述可视窗口单位包括视窗最小值、视窗最大值；将所述视窗最小值或者所述视窗最大值作为层叠样式表单位，对页面视图中的元素进行布局和设计；将布局和设计后的页面视图进行渲染并显示。本申请实施例通过利用可视窗口单位作为层叠样式表单位，对页面视图中的元素进行布局和设计，使得布局和设计出来的页面视图可以匹配不同类型不同版本的终端，也可以在同一个终端中进行自由缩放，适配性强。

Description

自适配页面视图的开发方法、装置、计算机设备及存储介质

技术领域

本申请涉及用户界面设计技术领域，尤其涉及一种自适配页面视图的开发方法、装置、计算机设备及存储介质。

背景技术

在开发页面视图以将页面视图在浏览器进行显示时，需要开发的页面视图适配不同终端的浏览器，如不同类型不同版本的手机以及不同类型不同版本的PC机等，在不同类型的不同版本的手机或者PC机屏幕大小可能并不一样。目前基于浏览器的适配包括通过设计百分比、通过媒体查询、rem布局等技术方案来实现，这些技术方案都能解决终端浏览器的适配问题。但利用百分比设计页面视图时需要考虑父级元素的大小和比例。媒体查询方案写的代码量比较多，如需要对不同屏幕大小的终端进行不同样式的适配；另外，媒体查询方法需要配置多个响应断点，而且带来的体验也对用户十分的不友好：布局在响应断点范围内的分辨率下维持不变，而在响应断点切换的瞬间，布局带来断层式的切换变化。rem需要利用javascript计算根元素的字体大小等，即需要内嵌一些脚本去动态计算根元素大小。

发明内容

本申请实施例提供一种自适配页面视图的开发方法、装置、计算机设备及存储介质，可使得设计出的页面视图匹配不同类型不同版本的终端，适配性强。

第一方面，本申请实施例提供了一种自适配页面视图的开发方法，该方法包括：

获取可视窗口的宽度和高度；根据所述可视窗口的宽度和高度计算可视窗口单位，其中，所述可视窗口单位包括视窗宽度百分比、视窗高度百分比、视窗最小值、视窗最大值，其中，所述视窗最小值为所述视窗宽度百分比和所述视窗高度百分比中较小的值，所述视窗最大值为所述视窗宽度百分比和所述视窗高度百分比中较大的值；将所述视窗最小值或者所述视窗最大值作为层叠样式表单位，对页面视图中的元素进行布局和设计；将布局和设计后的页面视图进行渲染并显示。

第二方面，本申请实施例提供了一种自适配页面视图的开发装置，该装置包括用于执行上述第一方面所述的方法对应的单元。

第三方面，本申请实施例提供了一种计算机设备，所述计算机设备包括存储器，以及与所述存储器相连的处理器；

所述存储器用于存储计算机程序，所述处理器用于运行所述存储器中存储的计算机程序，以执行上述第一方面所述的方法。

第四方面，本申请实施例提供了一种存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时，实现上述第一方面所述的方法。

本申请实施例通过利用可视窗口单位作为层叠样式表单位，对页面视图中的元素进行布局和设计，使得布局和设计出来的页面视图可以匹配不同类型不同版本的终端，也可以在同一个终端中进行自由缩放，适配性强。

附图说明

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

图1是本申请实施例提供的自适配页面视图的开发方法的流程示意图；

图2是本申请实施例提供的自适配页面视图的开发方法的子流程示意图；

图3是本申请实施例提供的利用vm作为CSS单位布局和设计的页面视图的示意图；

图4是本申请另一实施例提供的自适配页面视图的开发方法的流程示意图；

图5是本申请实施例提供的利用vm作为CSS单位并结合媒体查询设计和布局的页面视图的示意图；

图6是本申请实施例提供的一应用场景示意图；

图7是本申请另一实施例提供的自适配页面视图的开发方法的流程示意图；

图8是本申请实施例提供的自适配页面视图的开发装置的示意性框图；

图9是本申请实施例提供的布局单元的示意性框图；

图10是本申请另一实施例提供的自适配页面视图的开发装置的示意性框图；

图11是本申请另一实施例提供的自适配页面视图的开发装置的示意性框图；

图12本申请实施例提供的一种计算机设备的示意性框图。

具体实施方式

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

本申请实施例以开发人员的角度，提供一种自适配页面视图的开发方法，该方法应用于服务器端，如源码服务器端。在利用该自适配页面视图的开发方法开发了页面视图，并将页面视图所对应的代码发布之后，可以通过其他终端或者其他服务器来渲染通过该自适配视图的开发方法所开发的页面视图并显示页面视图。

图1是本申请实施例提供的自适配页面视图的开发方法的流程示意图。如图1所示，该方法包括S101-S104。

S101，获取可视窗口的宽度和高度。

可视窗口指的是可视区域，具体指的是浏览器的可视区域，浏览器实际显示内容的区域。也可以理解为浏览器内部的可视区域，不包含任务栏标题栏以及底部工具栏的浏览器区域。具体地，可以直接获取当前终端浏览器的可视窗口的宽度和高度，如通过window.innerWidth/window.innerHeight获取当前终端浏览器的可视窗口的宽度和高度，还可以自定义浏览器可视窗口的宽度和高度。这里的高度和宽度是以像素为单位的，指的是物理像素。与rem不同，rem中使用的是逻辑像素，以逻辑像素进行相关处理。

S102，根据所述可视窗口的宽度和高度计算可视窗口单位，其中，所述可视窗口单位包括视窗宽度百分比、视窗高度百分比、视窗最小值、视窗最大值，其中，所述视窗最小值为所述视窗宽度百分比和所述视窗高度百分比中较小的值，所述视窗最大值为所述视窗宽度百分比和所述视窗高度百分比中较大的值。

其中，可视窗口单位(也称为视口单位)主要包括以下几个：

vw：viewpointwidth，视窗宽度百分比，1vw等于可视窗口宽度的1％，即可视窗口宽度(浏览器可视区域宽度)被均分为100单位的vw，100vw＝可视窗口宽度；

vh：viewpointheight，视窗高度百分比，1vh等于可视窗口高度的1％，即可视窗口高度(浏览器可视区域高度)被均分为100单位的vh，100vh＝可视窗口高度；

vmin：视窗最小值，选取vw和vh中较小的那个所对应的值；

vmax：视窗最大值，选取vw和vh中较大的那个所对应的值。

vm：视窗最小值或者视窗最大值。

需要注意的是，对于移动终端如手机来说，由于一般手机终端使用时是竖屏，即可视窗口的宽度小于高度，因此vm指的是vmin；对于PC端来说，由于使用时是横屏，即可视窗口的宽度大于高度，因此vm指的是vmax。

如若浏览器可视窗口尺寸为650*320，即可视窗口宽度为650px、可视窗口高度为320px。那么1vw＝650px*1％＝6.5px(这是理论推算的出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px)；1vh＝320px*1％＝3.2px。

可视窗口单位区别于％单位(百分比单位)，可视窗口单位是依赖于可视窗口的尺寸，即可视窗口的宽度和高度，根据可视窗口尺寸的百分比来定义的；而％单位则是依赖于元素的父级元素，根据元素的父级元素决定的。

S103，将所述视窗最小值或者所述视窗最大值作为层叠样式表单位，对页面视图中的元素进行布局和设计。

其中，层叠样式表(Cascading Style Sheets，可简写为CSS)，是一种用来表现HTML或XML等文件样式的计算机语言。将视窗最小值vmin或者视窗最大值vman作为CSS单位，对页面视图中的元素进行布局和设计，即以可视窗口单位中的vm作为CSS单位，对页面视图中的元素进行布局和设计。其中，若可视窗口的宽度小于高度，则使用视窗最小值作为CSS单位，若可视窗口的宽度大于高度，则使用视窗最大值作为CSS单位。

具体地，获取设计稿中的尺寸，包括设计页面的尺寸、每个元素的尺寸、每个元素间间距的尺寸；将设计稿中的尺寸转换为以vm作为CSS单位来对页面视图进行布局和设计。

在一实施例中，如图2所示，步骤S103包括S201-S203。

S201，获取设计稿中设计页面的宽度和高度、每个元素的宽度和高度、元素间间距的宽度和高度。如可以通过输入接口输入设计页面的宽度和高度、每个元素的宽度和高度、元素间间距的宽度和高度；还可以通过获取设计稿图像，识别设计稿图像中的各种宽度和高度信息；还可以是通过其他的方式获取设计稿中各种宽度和高度信息。

S202，根据所述每个元素的宽度和高度以及所述设计稿中设计页面的宽度和高度计算每个元素在页面视图中的宽度和高度，根据所述元素间间距的宽度和高度以及所述设计稿中设计页面的宽度和高度计算每个元素间间距在页面视图中的宽度和高度，其中，所述每个元素在页面视图中的宽度和高度，以及所述每个元素间间距在页面视图中的宽度和高度是以所述视窗最小值或者所述视窗最大值作为层叠样式表单位。

具体地计算公式为：(每个元素的宽度或者元素间间距的宽度/设计页面的宽度)*100vm，可以计算出每个元素或者元素间间距的宽度；(每个元素的高度或者元素间间距的高度/设计页面的高度)*100vm，可以计算出每个元素的高度或者元素间间距的高度。

S203，根据计算出来的每个元素在页面视图中的宽度和高度，以及每个元素间间距在页面视图中的宽度和高度来进行页面视图的布局和设计。

可以理解，在页面视图中，无论是文本还是每个元素的宽高、间距等都使用vm作为CSS单位。

如有一个元素box，需要让它始终在可是屏幕上可见，对应的CSS如下：

.box{

height:100vm；

width:100vm；}

如设置盒子间距所对应的CSS为：padding:vm(15)vm(10)vm(10)；

如设置字体大小所对应的CSS为：font-size:vm(10)；

图3是本申请实施例提供的利用vm作为CSS单位布局和设计的页面视图的示意图。在图3中，页面视图是以竖屏的形式显示，页面视图中包括页面头部、页面中间部分，页面底部，其中，页面头部、页面底部的宽度都为100vm，在页面中间部分中包括有元素1、元素2、元素3、元素4、元素5、元素6、元素7、元素8。其中，元素1、元素2、元素3大小相同，且同排排列，宽度都为30vm，元素1、元素2、元素3中间有间距且与可视窗口的左右边缘也有间距。元素4排列在元素1、元素2、元素3的下面，宽度为85vm。元素5、元素6、元素7、元素8大小相同，宽度为40vm，其中，元素5、元素6排列在元素4下面，元素7、元素8排列在元素5、元素6下面。需要注意的是，图3中仅仅为示意图，仅标识了各个元素的宽度，以方便理解如何利用vm作为CSS单位实现页面视图的布局和设计。其中，每个元素的高度，以及每个元素间间距的大小都没有进行标识。

S104，将布局和设计后的页面视图进行渲染并显示。

上述实施例利用vm来进行页面视图的布局和设计，因为vm是根据可视窗口计算出来的，且1vm＝1％可视窗口的大小。即使不同类型不同版本的终端的可视窗口不同，设计出来的页面视图仍可以匹配不同类型不同版本的终端，也可以在同一个终端中进行自由缩放，适配性强。由于使用同一个样式，可以适配不同类型不同版本的终端，降低了开发成本。

图4是本申请另一实施例提供的自适配页面视图的开发方法的流程示意图。该方法实施例包括步骤S401-S405。其中，与图1实施例的区别在于：增加了步骤S404。下面将详细介绍步骤S404，其他步骤请参看图1实施例的对应描述。

S404，利用媒体查询功能对所述页面视图中的元素进行布局和设计。

媒体查询的基本结构如下：

@media(media-feature-name:value){

/*符合条件时应用的样式*/

}

利用媒体查询可以根据当前浏览器所对应的终端的某些重要信息，比如屏幕大小、分辨率、颜色位深等，设置相对应的不同样式。即利用媒体查询可以设置满足某些条件时的样式，即媒体查询所对应的脚本内容包括满足的条件，满足该条件时所对应的样式。如媒体查询基本结构中，圆括号中的值(media-feature-name:value)为满足的条件，花括号{}中的值即为满足该条件时所对应的样式。满足的条件以及条件所对应的样式可以有一个，也可以有多个；还可以利用媒体查询来替换整个样式表，那么涉及的满足的条件以及条件所对应的样式就会有多个。如果浏览器当前的条件与媒体查询中包括的条件匹配，就会采用满足该条件所对应的样式来替代原有样式。如果不匹配，浏览器会忽略媒体查询所对应脚本中的样式。在渲染时，满足条件所对应的样式会被渲染。

如利用媒体查询功能实现页面视图中其中部分元素的显示和隐藏，对应的媒体查询的脚本内容为：若适配后的屏幕宽度大于320px(满足的条件)，则隐藏元素1、元素2、元素3(对应的样式)。

图5是本申请实施例提供的利用vm作为CSS单位并结合媒体查询设计和布局的页面视图的示意图。具体为利用vm作为CSS单位并结合媒体查询显示和隐藏某些元素的页面视图的效果示意图。在图5中，媒体查询所对应的脚本内容为：若适配后的屏幕宽度大于320px，则隐藏元素1、元素2、元素3。如图5所示，页面视图以横屏的形式显示，由于是横屏，当前屏幕的宽度大于320px，那么满足媒体查询所对应的条件，则采用满足该条件是所对应的样式，即隐藏元素1、元素2、元素3。如此，在页面视图中，显示了页面头部、页面中间部分，页面底部。其中，页面中间部分包括了元素4、元素5、元素6、元素7、元素8。元素4、元素5、元素6、元素7、元素8所对应的宽度都不变，分别为85vm、40vm、40vm、40vm、40vm。然而与图3所示的示意图不同的是，由于是横屏，所对应的vm具体值发生了变化，即vm的值变大了。所对应的元素4、元素5、元素6、元素7、元素8的实际宽度也变大了。

该实施例在以vm为CSS单位的基础上，结合媒体查询功能来实现不同类型不同版本终端的适配，以提高用户的体验。该实施例可以应用在如下的一些场景中：如页面视图在一种终端的某一个显示状态显示的很好，而在该终端另外一个显示状态下可以进一步改进以显示更好效果，如在另一个显示状态下会觉得页面视图太冗长而希望可以进一步改进；如页面视图在某一种终端上显示的很好，而在另一种终端上可以进一步改进以显示更好效果等。该方案相对于单独使用媒体查询来说，并不会每种终端上都会发生实际的端点切换，减少了端点切换的次数，提高了用户的体验。

在一些实施例中，可以对布局和设计后的页面视图进行测试。如图6所示，为本申请实施例提供的利用自适配页面视图的开发方法开发出的页面视图进行测试时的应用场景示意图。可以理解地，测试也是开发的一部分。在图6中，包括源码服务器和多个测试服务器。本申请实施例提供的自适配页面视图的开发方法应用于该源码服务器中，该源码服务器可以集成本申请中的任意自适配页面视图的开发装置。源码服务器和测试服务器是可以进行调试开发测试的台式电脑、平板电脑、智能移动终端等终端设备，在此不作具体限制。在图6中，源码服务器可以有多个，测试服务器可以有更多个，需要注意的是，一个源码服务器可以向多个测试服务器同时推送利用自适配页面视图的开发方法开发出的页面视图。多个测试服务器可以向源码服务器发送调试修改后的页面视图，源码服务器接收到调试修改后的页面视图后，可将调试修改后的页面视图同时推送到多个源码服务器。需要指出的是，同一时间只有一个测试服务器可以对页面视图进行调试修改，以保证写页面视图时的排他性。

图7是本申请另一实施例提供的自适配页面视图的开发方法的流程示意图。该方法实施例包括步骤S701-S711。其中，与图4实施例的区别在于：增加了步骤S706-S711。下面将详细介绍步骤S706-S711，其他步骤请参看图4实施例的对应描述。

S706，若接收到测试指令，将布局和设计后的页面视图同步推送至多个测试服务器，以让布局和设计后的页面视图在多个测试服务器上渲染并显示。

将布局和设计后的页面视图同步推送至多个测试服务器，而不是一个测试服务器，可以同时让布局和设计后的页面视图在多个终端设备上进行测试，提高了测试的效率。

S707，检测是否接收到所述多个测试服务器中的其中一个测试服务器发送的调试修改指令。

其中，若多个测试服务器同时发送调试修改指令，那么源码服务器先接收到一个调试修改指令，即为检测接收到该调用修改指令所对应的测试服务器发送的调试修改指令。这种情况会出现是因为调试修改指令在网络上传输需要时间，那么按照最先达到的调用修改指令为准。后续接收到其他测试服务器发送的调试修改指令，丢弃其他测试服务器发送的调试修改指令，并向其他测试服务器发出类似暂不能进行调试修改的提醒消息。

S708，若检测接收到其中一个测试服务器的调试修改指令，禁用所述多个测试服务器中的其他测试服务器的调试修改指令。

其中，可通过向其他测试服务器发送类似暂不能进行调试修改的提醒消息以提醒其他测试服务器不能进行调试修改，并结合其他方式来禁用其他测试服务器的调试修改指令，如检测其他测试服务器发送的指令是否为调试修改指令，若是，则丢弃其他测试服务器发送的调试修改指令。如此，保证同一时间，只有一个测试服务器对页面视图进行调试修改，保证了写页面视图时的排他性，以避免多个测试服务器对同一个文件同时进行写而造成的错误等。

S709，接收所述测试服务器对页面视图的调试修改。

S710，将所述测试服务器调试修改的内容保存至日志文件中。

其中，调试修改的内容包括调试修改的时间、调试修改用户信息、调试修改终端信息、调试修改的具体内容，其中，具体内容可以详细至某个文件的某某行，将某某内容修改为某某某内容等。将调试修改的内容保存在日志文件中，为以后定位异常和修改提供了方便。

S711，将调试修改后的页面视图重新推送至所述多个测试服务器，以让调试修改后的页面视图在所述多个测试服务器上进行渲染并显示。接着执行S707，直到接收到停止测试指令，停止测试。

该实施例可以同步将布局好的页面视图推送至多个测试服务器，提高了测试的效率，且允许测试服务器对页面视图进行调试修改，且将调试修改的代码保存至源码服务器，以加快测试的速度。

图8是本申请实施例提供的自适配页面视图的开发装置的示意性框图。该装置包括用于执行上述自适配页面视图的开发方法所对应的单元。该装置可以被配置于服务器中，如源码服务器中，源码服务器为可以进行调试开发测试的台式电脑、平板电脑、智能移动终端等终端设备。具体地，如图8所示，该装置80包括获取单元801、单位计算单元802、布局单元803以及渲染单元804。

获取单元801，用于获取可视窗口的宽度和高度。其中，可视窗口指的是可视区域，具体指的是浏览器的可视区域，浏览器实际显示内容的区域。具体地，可以直接获取当前终端浏览器的可视窗口的宽度和高度，还可以自定义浏览器可视窗口的宽度和高度。

单位计算单元802，用于根据所述可视窗口的宽度和高度计算可视窗口单位，其中，所述可视窗口单位包括视窗宽度百分比、视窗高度百分比、视窗最小值、视窗最大值，其中，所述视窗最小值为所述视窗宽度百分比和所述视窗高度百分比中较小的值，所述视窗最大值为所述视窗宽度百分比和所述视窗高度百分比中较大的值。

布局单元803，用于将所述视窗最小值或者所述视窗最大值作为层叠样式表单位，对页面视图中的元素进行布局和设计。

具体地，获取设计稿中的尺寸，包括设计页面的尺寸、每个元素的尺寸、每个元素间间距的尺寸；将设计稿中的尺寸转换为以vm作为CSS单位来对页面视图进行布局和设计。

在一实施例中，如图9所示，布局单元803包括设计稿获取单元901、单位换算单元902以及布局设计单元903。其中，设计稿获取单元901，用于获取设计稿中设计页面的宽度和高度、每个元素的宽度和高度、元素间间距的宽度和高度。单位换算单元902，用于根据所述每个元素的宽度和高度以及所述设计稿中设计页面的宽度和高度计算每个元素在页面视图中的宽度和高度，根据所述元素间间距的宽度和高度以及所述设计稿中设计页面的宽度和高度计算每个元素间间距在页面视图中的宽度和高度，其中，所述每个元素在页面视图中的宽度和高度，以及所述每个元素间间距在页面视图中的宽度和高度是以所述视窗最小值或者所述视窗最大值作为层叠样式表单位。布局设计单元903，用于根据计算出来的每个元素在页面视图中的宽度和高度，以及每个元素间间距在页面视图中的宽度和高度来进行页面视图的布局和设计。

具体地，以vm作为CSS单位来对页面视图进行布局和设计的页面视图请参看图3中的示例。

渲染单元804，用于将布局和设计后的页面视图进行渲染并显示。

图10是本申请另一实施例提供的自适配页面视图的开发装置的示意性框图。具体地，如图10所示，该装置100包括获取单元101、单位计算单元102、布局单元103、媒体查询单元104以及渲染单元105。该实施例与图8实施例的区别在于：增加了媒体查询单元104。下面将介绍媒体查询单元104，其他单元请参看图8实施例的描述。

媒体查询单元104，用于利用媒体查询功能对所述页面视图中的元素进行布局和设计。

媒体查询的基本结构如下：

@media(media-feature-name:value){

/*符合条件时应用的样式*/

}

利用媒体查询可以根据当前浏览器所对应的终端的某些重要信息(比如屏幕大小、分辨率、颜色位深等，设置相对应的不同样式。即利用媒体查询可以设置满足某些条件时的样式，即媒体查询所对应的脚本包括满足的条件，满足该条件时所对应的样式。如媒体查询基本结构中，圆括号中的值(media-feature-name:value)为满足的条件，花括号{}中的值即为满足该条件时所对应的样式。如利用媒体查询功能实现页面视图中其中部分元素的显示和隐藏，对应的媒体查询的脚本内容为：若适配后的屏幕宽度大于320px(满足的条件)，则隐藏元素1、元素2、元素3(对应的样式)。利用vm作为CSS单位并结合媒体查询设计和布局的页面视图请参看图5所示的示意图。

图11是本申请另一实施例提供的自适配页面视图的开发装置的示意性框图。具体地，如图11所示，该装置110包括获取单元111、单位计算单元112、布局单元113、媒体查询单元114、渲染单元115、推送测试单元116、检测单元117、禁用单元118、接收修改单元119、修改保存单元119a。该实施例与图10实施例的区别在于：增加了推送测试单元116、检测单元117、禁用单元118、接收修改单元119、修改保存单元119a，其他单元请参看图10实施例和图8实施例的描述。

推送测试单元116，用于若接收到测试指令，将布局和设计后的页面视图同步推送至多个测试服务器，以让布局和设计后的页面视图在多个测试服务器上进行渲染并显示。如此可以同时对布局和设计后的页面视图在多个终端设备上进行测试，提高了测试的效率。

检测单元117，用于检测是否接收到所述多个测试服务器中的其中一个测试服务器发送的调试修改指令。

禁用单元118，用于若检测接收到其中一个测试服务器的调试修改指令，禁用所述多个测试服务器中的其他测试服务器的调试修改指令。如此，保证一个时间中，只有一个测试服务器对页面视图进行调试修改，保证了写页面视图时的排他性，以避免多个测试服务器对同一个文件同时进行写而造成的错误等。

接收修改单元119，用于接收所述测试服务器对页面视图的调试修改。

修改保存单元119a，用于将所述测试服务器调试修改的内容保存至日志文件中。将调试修改的内容保存在日志文件中，为以后定位异常和修改提供方便。

推送测试单元116，还用于将调试修改后的页面视图重新推送至所述多个测试服务器，以让调试修改后的页面视图在所述多个测试服务器上进行渲染并显示。

需要说明的是，所属领域的技术人员可以清楚地了解到，上述装置和各单元的具体实现过程，可以参考前述方法实施例中的相应描述，为了描述的方便和简洁，在此不再赘述。

上述装置可以实现为一种计算机程序的形式，计算机程序可以在如图12所示的计算机设备上运行。

图12为本申请实施例提供的一种计算机设备的示意性框图。该设备可以是服务器，如源码服务器。其中，源码服务器可以是能进行调试开发测试的台式电脑、平板电脑、智能移动终端等终端设备。该设备120包括通过系统总线121连接的处理器122、存储器和网络接口123，其中，存储器可以包括非易失性存储介质124和内存储器125。

该非易失性存储介质124可存储操作系统1241和计算机程序1242。该非易失性存储介质中所存储的计算机程序1242被处理器122执行时，可实现上述所述的自适配页面视图的开发方法。该处理器122用于提供计算和控制能力，支撑整个设备120的运行。该内存储器125为非易失性存储介质中的计算机程序的运行提供环境，该计算机程序被处理器122执行时，可使得处理器122执行上述所述的自适配页面视图的开发方法。该网络接口123用于进行网络通信。本领域技术人员可以理解，图12中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的设备120的限定，具体的设备120可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

其中，所述处理器122用于运行存储在存储器中的计算机程序，以实现如下步骤：

获取可视窗口的宽度和高度；根据所述可视窗口的宽度和高度计算可视窗口单位，其中，所述可视窗口单位包括视窗宽度百分比、视窗高度百分比、视窗最小值、视窗最大值，其中，所述视窗最小值为所述视窗宽度百分比和所述视窗高度百分比中较小的值，所述视窗最大值为所述视窗宽度百分比和所述视窗高度百分比中较大的值；将所述视窗最小值或者所述视窗最大值作为层叠样式表单位，对页面视图中的元素进行布局和设计；将布局和设计后的页面视图进行渲染并显示。

在一实施例中，所述处理器122在执行所述将布局和设计后的页面视图进行渲染并显示之前，还具体实现如下步骤：

利用媒体查询功能对所述页面视图中的元素进行布局和设计。

在一实施例中，所述处理器122在执行所述将所述视窗最小值或者所述视窗最大值作为层叠样式表单位，对页面视图中的元素进行布局和设计时，具体实现如下步骤：

获取设计稿中设计页面的宽度和高度、每个元素的宽度和高度、元素间间距的宽度和高度；根据所述每个元素的宽度和高度以及所述设计稿中设计页面的宽度和高度计算每个元素在页面视图中的宽度和高度，根据所述元素间间距的宽度和高度以及所述设计稿中设计页面的宽度和高度计算每个元素间间距在页面视图中的宽度和高度，其中，所述每个元素在页面视图中的宽度和高度，以及所述每个元素间间距在页面视图中的宽度和高度是以所述视窗最小值或者所述视窗最大值作为层叠样式表单位；根据计算出来的每个元素在页面视图中的宽度和高度，以及每个元素间间距在页面视图中的宽度和高度来进行页面视图的布局和设计。

在一实施例中，所述处理器122还具体实现如下步骤：

若接收到测试指令，将布局和设计后的页面视图同步推送至多个测试服务器，以让布局和设计后的页面视图在多个测试服务器上进行渲染并显示。

在一实施例中，所述处理器122在执行所述将布局和设计后的页面视图同步推送至多个测试服务器，以让布局和设计后的页面视图在多个测试服务器上进行渲染并显示之后，还具体实现如下步骤：

检测是否接收到所述多个测试服务器中的其中一个测试服务器发送的调试修改指令；若检测接收到其中一个测试服务器的调试修改指令，接收所述测试服务器对页面视图的调试修改；将调试修改后的页面视图重新推送至所述多个测试服务器，以让调试修改后的页面视图在所述多个测试服务器上进行渲染并显示。

在一实施例中，所述处理器122在执行所述若接收到其中一个测试服务器的调试修改指令之后，还具体实现如下步骤：

禁用所述多个测试服务器中的其他测试服务器的调试修改指令。

在一实施例中，所述处理器122在所述接收所述测试服务器对页面视图的调试修改之后，还具体实现如下步骤：

将所述测试服务器调试修改的内容保存至日志文件中。

应当理解，在本申请实施例中，所称处理器122可以是中央处理单元(CentralProcessing Unit，CPU)，该处理器还可以是其他通用处理器、数字信号处理器(DigitalSignal Processor，DSP)、专用集成电路(应用程序lication Specific IntegratedCircuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

本领域普通技术人员可以理解的是实现上述实施例的方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成。该计算机程序可存储于一存储介质中，该存储介质可以为计算机可读存储介质。该计算机程序被该计算机系统中的至少一个处理器执行，以实现上述方法的实施例的流程步骤。

因此，本申请还提供了一种存储介质。该存储介质可以为计算机可读存储介质。该存储介质存储有计算机程序，该计算机程序当被处理器执行时实现以下步骤：

获取可视窗口的宽度和高度；根据所述可视窗口的宽度和高度计算可视窗口单位，其中，所述可视窗口单位包括视窗宽度百分比、视窗高度百分比、视窗最小值、视窗最大值，其中，所述视窗最小值为所述视窗宽度百分比和所述视窗高度百分比中较小的值，所述视窗最大值为所述视窗宽度百分比和所述视窗高度百分比中较大的值；将所述视窗最小值或者所述视窗最大值作为层叠样式表单位，对页面视图中的元素进行布局和设计；将布局和设计后的页面视图进行渲染并显示。

在一实施例中，所述处理器在执行所述将布局和设计后的页面视图进行渲染并显示之前，还具体实现如下步骤：

利用媒体查询功能对所述页面视图中的元素进行布局和设计。

在一实施例中，所述处理器在执行所述将所述视窗最小值或者所述视窗最大值作为层叠样式表单位，对页面视图中的元素进行布局和设计时，具体实现如下步骤：

获取设计稿中设计页面的宽度和高度、每个元素的宽度和高度、元素间间距的宽度和高度；根据所述每个元素的宽度和高度以及所述设计稿中设计页面的宽度和高度计算每个元素在页面视图中的宽度和高度，根据所述元素间间距的宽度和高度以及所述设计稿中设计页面的宽度和高度计算每个元素间间距在页面视图中的宽度和高度，其中，所述每个元素在页面视图中的宽度和高度，以及所述每个元素间间距在页面视图中的宽度和高度是以所述视窗最小值或者所述视窗最大值作为层叠样式表单位；根据计算出来的每个元素在页面视图中的宽度和高度，以及每个元素间间距在页面视图中的宽度和高度来进行页面视图的布局和设计。

在一实施例中，所述处理器还具体实现如下步骤：

若接收到测试指令，将布局和设计后的页面视图同步推送至多个测试服务器，以让布局和设计后的页面视图在多个测试服务器上进行渲染并显示。

在一实施例中，所述处理器在执行所述将布局和设计后的页面视图同步推送至多个测试服务器，以让布局和设计后的页面视图在多个测试服务器上进行渲染并显示之后，还具体实现如下步骤：

检测是否接收到所述多个测试服务器中的其中一个测试服务器发送的调试修改指令；若检测接收到其中一个测试服务器的调试修改指令，接收所述测试服务器对页面视图的调试修改；将调试修改后的页面视图重新推送至所述多个测试服务器，以让调试修改后的页面视图在所述多个测试服务器上进行渲染并显示。

在一实施例中，所述处理器在执行所述若接收到其中一个测试服务器的调试修改指令之后，还具体实现如下步骤：

禁用所述多个测试服务器中的其他测试服务器的调试修改指令。

在一实施例中，所述处理器在所述接收所述测试服务器对页面视图的调试修改之后，还具体实现如下步骤：

将所述测试服务器调试修改的内容保存至日志文件中。

所述存储介质可以是U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、磁碟或者光盘等各种可以存储程序代码的计算机可读存储介质。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置、设备和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的装置、设备和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以权利要求的保护范围为准。

Claims (10)

1.一种自适配页面视图的开发方法，其特征在于，所述方法包括：

获取可视窗口的宽度和高度；

根据所述可视窗口的宽度和高度计算可视窗口单位，其中，所述可视窗口单位包括视窗宽度百分比、视窗高度百分比、视窗最小值、视窗最大值，其中，所述视窗最小值为所述视窗宽度百分比和所述视窗高度百分比中较小的值，所述视窗最大值为所述视窗宽度百分比和所述视窗高度百分比中较大的值；

将所述视窗最小值或者所述视窗最大值作为层叠样式表单位，对页面视图中的元素进行布局和设计；

将布局和设计后的页面视图进行渲染并显示。

2.根据权利要求1所述的方法，其特征在于，在所述将布局和设计后的页面视图进行渲染并显示之前，所述方法还包括：

利用媒体查询功能对所述页面视图中的元素进行布局和设计。

3.根据权利要求1所述的方法，其特征在于，所述将所述视窗最小值或者所述视窗最大值作为层叠样式表单位，对页面视图中的元素进行布局和设计，包括：

获取设计稿中设计页面的宽度和高度、每个元素的宽度和高度、元素间间距的宽度和高度；

根据所述每个元素的宽度和高度以及所述设计稿中设计页面的宽度和高度计算每个元素在页面视图中的宽度和高度，根据所述元素间间距的宽度和高度以及所述设计稿中设计页面的宽度和高度计算每个元素间间距在页面视图中的宽度和高度，其中，所述每个元素在页面视图中的宽度和高度，以及所述每个元素间间距在页面视图中的宽度和高度是以所述视窗最小值或者所述视窗最大值作为层叠样式表单位；

根据计算出来的每个元素在页面视图中的宽度和高度，以及每个元素间间距在页面视图中的宽度和高度来进行页面视图的布局和设计。

4.根据权利要求1所述的方法，其特征在于，所述方法还包括：

若接收到测试指令，将布局和设计后的页面视图同步推送至多个测试服务器，以让布局和设计后的页面视图在多个测试服务器上进行渲染并显示。

5.根据权利要求4所述的方法，其特征在于，所述方法还包括：

检测是否接收到所述多个测试服务器中的其中一个测试服务器发送的调试修改指令；

若检测接收到其中一个测试服务器的调试修改指令，接收所述测试服务器对页面视图的调试修改；

将调试修改后的页面视图重新推送至所述多个测试服务器，以让调试修改后的页面视图在所述多个测试服务器上进行渲染并显示。

6.根据权利要求5所述的方法，其特征在于，在所述若接收到其中一个测试服务器的调试修改指令之后，所述方法还包括：

禁用所述多个测试服务器中的其他测试服务器的调试修改指令。

7.根据权利要求5所述的方法，其特征在于，在所述接收所述测试服务器对页面视图的调试修改之后，所述方法还包括：

将所述测试服务器调试修改的内容保存至日志文件中。

8.一种自适配页面视图的开发装置，其特征在于，所述自适配页面视图的开发装置包括用于执行如权利要求1-7任一项所述方法的单元。

9.一种计算机设备，其特征在于，所述计算机设备包括存储器，以及与所述存储器相连的处理器；

所述存储器用于存储计算机程序；所述处理器用于运行所述存储器中存储的计算机程序，以执行如权利要求1-7任一项所述的方法。

10.一种存储介质，其特征在于，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时，实现如权利要求1-7任一项所述的方法。