本发明涉及屏幕设备技术领域，具体的说是一种应用于政务服务终端的页面自适应方法。
背景技术：
在全市或全省范围内的政务服务大厅中，当政务大厅相关设备配套系统的页面需要显示在大厅服务终端的屏幕设备时，针对不同的屏幕设备尺寸，需要对显示页面进行适应性调节。
为了使显示的页面可以自适应政务服务终端屏幕设备的尺寸，减少人工调节尺寸带来的时间损耗，以及调节不及时时页面无法全部显示或文字过小的问题，设计一种应用于政务服务终端的页面自适应方法。
技术实现要素：
本发明针对目前技术发展的需求和不足之处，提供一种应用于政务服务终端的页面自适应方法，来解决推行全市或全省范围内统一的政务服务大厅相关系统时，需针对不同的政务服务终端屏幕设备分别进行页面适配的问题。
本发明的一种应用于政务服务终端的页面自适应方法，解决上述技术问题采用的技术方案如下：
一种应用于政务服务终端的页面自适应方法，其实现内容包括：
(1)设计页面元素的百分比，实现根据页面大小、比例、文字和元素的自动调整；
(2)使用流动布局技术，实现页面元素位置的自动调整；
(3)基于css3媒体查询方法，通过匹配政务服务终端不同屏幕设备的特征，让不同特征下的css代码生效；
(4)基于界面的可视化编辑功能，允许政务服务大厅管理人员以所见即所得的方式设计政务服务终端的屏幕界面，实现视频、图片、滚动字幕、音频各项信息的手动添加。
进一步的，页面自适应方法的实现内容还包括：
搭建公共素材库，在同一个页面显示于政务服务终端比例有差别的屏幕时，分析屏幕显示需求，以通过公共素材库的素材智能填充屏幕的空白区域。
更进一步的，搭建的公共素材库包括取号界面公共素材库、自助服务界面公共素材库、广告机界面公共素材库、查询机界面公共素材库，每个公共素材库都包含有图片和组件，每个图片和组件都配置有相应的标签，标签即是对图片/组件具有要素的简要说明。
进一步的，设计页面元素的百分比时，基于屏幕的分辨率，采用定位页面代码、自适应屏幕宽度，并采用相对大小“rem”描述页面、元素、字号。
更进一步的，设计页面元素的百分比的具体操作为：
(1.1)在页面代码头部，加入一行viewport元标签，让页面宽度自动适应政务服务终端屏幕设备的宽度：
<metaname＝"viewport"content＝"width＝device-width,initial-scale＝1.0,maximum-scale＝1.0,minimum-scale＝1.0,user-scalable＝no">；
其中，①属性“width＝device-width”中，“width”为设置layoutviewport的宽度，为一个正整数，“width-device”表示宽度是屏幕设备的宽度，②属性“initial-scale＝1.0”中，initial-scale为设置页面的初始缩放值，可以是一个带小数的数字，1.0就是占页面的100％，③属性“minimum-scale＝1.0”表示最小的缩放比例，④属性“maximum-scale＝1.0”表示最大的缩放比例，⑤属性“user-scalable＝no”表示用户是否可以调整缩放比例，值为“no”或“yes”；
(1.2)在字体大小是页面默认大小的100％时，采用相对大小“rem”描述页面、元素、字号。
进一步的，使用流动布局技术时，页面各区块中元素的位置都是浮动的，这就使得在屏幕设备宽度太小放不下两个元素时，后一个元素会自动滚动到前一个元素的下方，不会在屏幕设备的水平方向溢出。
进一步的，执行(3)之前，需要预先设计政务服务终端屏幕设备的尺寸和比例页面，并将预先设计的内容统一放置在一套css代码中。
更进一步的，屏幕设备的特征包括：浏览器宽/高width/height、标识小于最大宽度时生效max-width、标识大于最大宽度时生效min-width、屏幕设备分辨率宽高device-width/device-height、屏幕设备分辨率resolution、纵向-高度大于等于宽度时orientation:portrait、横向-高度小于宽度时orientation:landscape。
本发明的一种应用于政务服务终端的页面自适应方法，与现有技术相比具有的有益效果是：
(1)本发明通过设计页面元素的百分比、使用流动布局技术、使用css3媒体查询方法、使用界面的可视化编辑功能，实现页面显示于政务服务终端屏幕设备时的自适应调整，以满足当前政务服务大厅的业务和工作需求，提高部署效率和服务体验；
(2)本发明解决了推行全市或全省范围内统一的政务服务服务大厅相关系统时，需针对不同的政务服务终端屏幕设备分别进行页面适配的问题，可大为节省实施工作量，减少实施时间。
附图说明
附图1是本发明实施例二中基于屏幕需求匹配公共素材库的示意图。
具体实施方式
为使本发明的技术方案、解决的技术问题和技术效果更加清楚明白，以下结合具体实施例，对本发明的技术方案进行清楚、完整的描述。
实施例一：
本实施例提出一种应用于政务服务终端的页面自适应方法，其实现内容包括：
(1)设计页面元素的百分比，实现根据页面大小、比例、文字和元素的自动调整。
设计页面元素的百分比时，基于屏幕的分辨率，采用定位页面代码、自适应屏幕宽度，并采用相对大小“rem”描述页面、元素、字号，具体操作为：
(1.1)在页面代码头部，加入一行viewport元标签，让页面宽度自动适应政务服务终端屏幕设备的宽度：
<metaname＝"viewport"content＝"width＝device-width,initial-scale＝1.0,maximum-scale＝1.0,minimum-scale＝1.0,user-scalable＝no">；
其中，
(1.2)在字体大小是页面默认大小的100％时，采用相对大小“rem”描述页面、元素、字号。
(2)使用流动布局技术，实现页面元素位置的自动调整。
使用流动布局技术时，页面各区块中元素的位置都是浮动的，这就使得在屏幕设备宽度太小放不下两个元素时，后一个元素会自动滚动到前一个元素的下方，不会在屏幕设备的水平方向溢出。
(3)基于css3媒体查询方法，通过匹配政务服务终端不同屏幕设备的特征，让不同特征下的css代码生效。
执行(3)之前，需要预先设计政务服务终端屏幕设备的尺寸和比例页面，并将预先设计的内容统一放置在一套css代码中。
屏幕设备的特征包括：浏览器宽/高width/height、标识小于最大宽度时生效max-width、标识大于最大宽度时生效min-width、屏幕设备分辨率宽高device-width/device-height、屏幕设备分辨率resolution、纵向-高度大于等于宽度时orientation:portrait、横向-高度小于宽度时orientation:landscape。
执行(3)让不同特征下的css代码生效时，
通过link引入方式：
(4)基于界面的可视化编辑功能，允许政务服务大厅管理人员以所见即所得的方式设计政务服务终端的屏幕界面，实现视频、图片、滚动字幕、音频各项信息的手动添加。
实施例二：
在实施例一的基础上，本实施例提出的一种应用于政务服务终端的页面自适应方法，其实现内容还包括：
搭建公共素材库，在同一个页面显示于政务服务终端比例有差别的屏幕时，分析屏幕显示需求，以通过公共素材库的素材智能填充屏幕的空白区域。
搭建的公共素材库包括取号界面公共素材库、自助服务界面公共素材库、广告机界面公共素材库、查询机界面公共素材库，每个公共素材库都包含有图片和组件，每个图片和组件都配置有相应的标签，标签即是对图片/组件具有要素的简要说明。
参考附图1，以取号界面公共素材库为例，其包含有图片和组件，其中图片不限于背景图片和底部横图，图片的标签即对该图片包含的要素。基于屏幕设备的特征，分析屏幕显示界面的需求，假定分析结果包含底部图片、国庆元素、比例9*2三方面的需求，基于该需求匹配取号界面公共素材库，智能匹配得到某个底部横图为红色、国庆、比例9*2的标签，用匹配得到的标签填充屏幕的空白区域。
综上可知，采用本发明的一种应用于政务服务终端的页面自适应方法，可以解决推行全市或全省范围内统一的政务服务服务大厅相关系统时，需针对不同的政务服务终端屏幕设备分别进行页面适配的问题。
以上应用具体个例对本发明的原理及实施方式进行了详细阐述，这些实施例只是用于帮助理解本发明的核心技术内容。基于本发明的上述具体实施例，本技术领域的技术人员在不脱离本发明原理的前提下，对本发明所作出的任何改进和修饰，皆应落入本发明的专利保护范围。
1.一种应用于政务服务终端的页面自适应方法，其特征在于,其实现内容包括：
(1)设计页面元素的百分比，实现根据页面大小、比例、文字和元素的自动调整；
(2)使用流动布局技术，实现页面元素位置的自动调整；
(3)基于css3媒体查询方法，通过匹配政务服务终端不同屏幕设备的特征，让不同特征下的css代码生效；
(4)基于界面的可视化编辑功能，允许政务服务大厅管理人员以所见即所得的方式设计政务服务终端的屏幕界面，实现视频、图片、滚动字幕、音频各项信息的手动添加。
2.根据权利要求1所述的一种应用于政务服务终端的页面自适应方法，其特征在于，所述方法的实现内容还包括：
搭建公共素材库，在同一个页面显示于政务服务终端比例有差别的屏幕时，分析屏幕显示需求，以通过公共素材库的素材智能填充屏幕的空白区域。
3.根据权利要求2所述的一种应用于政务服务终端的页面自适应方法，其特征在于，搭建的公共素材库包括取号界面公共素材库、自助服务界面公共素材库、广告机界面公共素材库、查询机界面公共素材库，每个公共素材库都包含有图片和组件，每个图片和组件都配置有相应的标签，标签即是对图片/组件具有要素的简要说明。
4.根据权利要求1所述的一种应用于政务服务终端的页面自适应方法，其特征在于，设计页面元素的百分比时，基于屏幕的分辨率，采用定位页面代码、自适应屏幕宽度，并采用相对大小“rem”描述页面、元素、字号。
5.根据权利要求4所述的一种应用于政务服务终端的页面自适应方法，其特征在于，设计页面元素的百分比的具体操作为：
(1.1)在页面代码头部，加入一行viewport元标签，让页面宽度自动适应政务服务终端屏幕设备的宽度：
<metaname＝"viewport"content＝"width＝device-width,initial-scale＝1.0,maximum-scale＝1.0,minimum-scale＝1.0,user-scalable＝no">；
其中，①属性“width＝device-width”中，“width”为设置layoutviewport的宽度，为一个正整数，“width-device”表示宽度是屏幕设备的宽度，②属性“initial-scale＝1.0”中，initial-scale为设置页面的初始缩放值，可以是一个带小数的数字，1.0就是占页面的100％，③属性“minimum-scale＝1.0”表示最小的缩放比例，④属性“maximum-scale＝1.0”表示最大的缩放比例，⑤属性“user-scalable＝no”表示用户是否可以调整缩放比例，值为“no”或“yes”；
(1.2)在字体大小是页面默认大小的100％时，采用相对大小“rem”描述页面、元素、字号。
6.根据权利要求1所述的一种应用于政务服务终端的页面自适应方法，其特征在于，使用流动布局技术时，页面各区块中元素的位置都是浮动的，这就使得在屏幕设备宽度太小放不下两个元素时，后一个元素会自动滚动到前一个元素的下方，不会在屏幕设备的水平方向溢出。
7.根据权利要求1所述的一种应用于政务服务终端的页面自适应方法，其特征在于，执行(3)之前，需要预先设计政务服务终端屏幕设备的尺寸和比例页面，并将预先设计的内容统一放置在一套css代码中。
8.根据权利要求7所述的一种应用于政务服务终端的页面自适应方法，其特征在于，屏幕设备的特征包括：
浏览器宽/高width/height，
标识小于最大宽度时生效max-width，
标识大于最大宽度时生效min-width，
屏幕设备分辨率宽高device-width/device-height，
屏幕设备分辨率resolution，
纵向-高度大于等于宽度时orientation:portrait，
横向-高度小于宽度时orientation:landscape。
技术总结