（南京国电南自电网自动化有限公司江苏南京210000）
摘要：Web系统的前台开发一直是一个比较繁琐的工作,不仅因为不同的浏览器兼容性不同,还因为用户显示系统的屏幕大小不统一，特别是这两年各种移动终端的使用，传统的方法设置需要编写和调试多套前台代码。为了解决这个问题，HTML5和CSS3逐步发展起来，现在已经被众多浏览器支持。本文旨在通过采用最新的HTML5和CSS3规范,满足配网监控WEB系统在PC端和移动端的自适应显示。
引言
随着互联网和Web技术的发展，HTML5规范被W3C和世界主流的互联网公司所支持和推荐，成为下一代Web应用开发的新标准。HTML5广义上指的是包括HTML、CSS和JavaScript在内的一套技术组合。本文重点介绍了如何实现表现层在PC端和手机端的自适应显示。
1技术分析
本文采用HTML5结合CSS3设计和开发更通用的网页程序。
1.1HTML5
在之前HTML4开发的WEB系统中,在手机上直接显示都会发生变形、部分多媒体对象无法显示等问题。所以通常的解决办法是，单独开发一套适合手机使用的系统。
HTML5技术出现后，因为其在普通的PC端和移动平台拥有良好的兼容性，开发者利用HTML5结合CSS3技术开发出一套系统后，即可以在Windows平台、iOS平台、Android平台上运行。而且HTML5由现有的HTML4发展而来，对于广大的Web开发人员来说，其学习成本低，这些都大大减少了开发成本和移动费用。
1.2CSS3
CSS即层叠样式表（CascadingStyleSheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。
2系统关键部分的实现
2.1SVG图形实时监控
电力系统的接线图一般都为各自监控平台的专有格式，为了能够在浏览器上显示，需要转化成通用的矢量图SVG格式。图形中包含了图号，各种电力设备的分状态图元定义，电力设备的对象唯一标识符等内容。
SVG的同步刷新和事件处理是实时监控的核心。同步刷新指的是实时图元通过唯一标识符必须与实时数据对象相关联，以不同的图元样式显示不同的实时状态，使图形的显示与实时数据的刷新同步。图形事件处理指SVG画面中某些图元能够响应鼠标事件或其他事件，这样才能在触发图元的某些事件（比如鼠标点击）的时候，系统可以执行相应操作。下图是SVG同步刷新的交互流程图。
SVG矢量图除了具备交互式和动态的特点之外，另一个特点就是可以任意放大缩小而不失真，保证在自适应系统中可以友好的进行显示。因此基于SVG+AJAX的高质量图形显示是目前电力系统图形领域最通用的Web发布方案。
2.2响应式布局实现
用HTML5/CSS3实现响应式布局按照如下步骤进行。
第一步：确定需要兼容的设备类型、屏幕尺寸。设备类型：包括移动设备和PC。对于移动设备，设计和实现的时候注意增加手势的功能。屏幕尺寸：包括各种手机屏幕的尺寸（包括横向和竖向）、各种平板的尺寸（包括横向和竖向）、普通电脑屏幕和宽屏。
第二步：制作线框原型。针对确定下来的几个尺寸分别制作不同的线框原型，需要考虑清楚不同尺寸下，页面的布局如何变化，内容尺寸如何缩放，功能、内容的删减，甚至针对特殊的环境作特殊化的设计等。
第三步：测试线框原型。将图片导入到相应的设备进行一些简单的测试，可帮助我们尽早发现可访问性、可读性等方面存在的问题。
第四步：视觉设计。移动设备的屏幕像素密度与传统电脑屏幕不一样，在设计的时候需要保证内容文字的可读性、控件可点击区域的面积等。
第五步：前端实现。与传统的Web开发相比，响应式设计的页面由于页面布局、内容尺寸发生了变化，所以最终的产出更有可能与设计稿出入较大，需要前端开发人员和设计师多沟通。
CSS3中的MediaQuery实现响应式布局的方法有两种。一种是在link中在link中使用@media,另一种是在样式表中内嵌@media，本文采用第一种方法。
3结束语
本系统对原有传统的Web监控系统进行了升级和改进,从功能上实现了远程实时监控管理的目标。系统不仅支持在PC上使用，同时也可以在手机上根据屏幕大小自适应的显示，以比较低的成本实现了移动端的实时监控需求。为其他传统电力Web监控系统的改造和升级，提供了宝贵的经验和参考意义。
参考文献
[1]HTML5+CSS3从入门到精通；清华大学出版社；2013-06-01
[2]赵壤，黎艺，邓雪刚，刘迎仙；基于HTML5+CSS3的政府网站移动前端设计；电子技术与软件工程，2016年12期
[3]白蕾，郭清菊；HTML5与CSS3的设计模式；智能计算机与应用，2016年02期
[4]钟丽波，李然，周洋，陶洪生，纪秀艳；配网自动化实用化应用分析与建议；东北电力技术，2016年04期
[5]陈运启；SVG技术在煤矿监控系统中的应用研究；工矿自动化，2016年08期