摘要：该文针对惠州市技师学院招生网站手机客户体验不良的问题，探讨了响应式招生网站的建设，从网站设计及网站实现的技术要点进行了阐述。重点介绍了媒体查询，流式布局，弹性视觉媒体等关键技术。
关键词：响应式；媒体查询；流式布局；弹性视觉媒体
1 概述
招生工作对惠州市技师学院来说，是一项非常关键的工作。近年来惠州市各类中职、中技学校的招生竞争十分激烈，因此迫切需要做好我院的招生宣传工作，让更多的潜在生源能更好的了解我院的招生信息。现在越来越多的人使用手机上网，成为访问互联网的最常见终端。学校招生网站来自移动端的浏览量也日益庞大。但是我校的网站建设比较滞后，只有电脑版网站，手机端客户访问体验十分不友好。因此迫切需要对我校的招生网站进行改进，使其在各种移动设备上都有良好的表现。
比较传统的解决方法是通过开发专门的移动版网站来实现，即为不同的设备提供不同的网页。然而，近年来移动设备的种类越来越多，移动版网站不仅要适应iPhone、Android等手机平台，还需要考虑诸如iPad、Kindle、Galaxy Note 等平板设备。如果为每种设备都定制开发相应的移动版网站，一个网站就有多个portal（入口），不仅会大大增加架构设计的复杂度，也会提高维护的难度。
根据以上的分析，本文以响应式网页设计技术为基础，详细介绍响应式技校招生网站的设计及实现要点。
2 响应式技校招生网站设计
2.1 网站功能分析及美术设计
技校招生网站主页的设计需要符合职业技术学院的形象塑造，其内在设计需要使代码和功能可以灵活，适应响应式设计的需求。因此前期的站点规划非常重要，需要协调和兼顾外在和内在，前段和后台的需求。在惠州市技师学院招生网站主页规划中，在对在校师生及招生部门工作人员进行调查后，最终确定了主页的内容模块和功能模块。最终将页面分为了头部导航区，内容区，功能区，页脚区四个主要部分。其中头部导航区包含有LOGO、大图展示、主菜单等；内容区包括招生快讯，报读优势，招生专业等；功能区包括公告栏，快捷导航等，页脚区则是简单的文字。
2.2 构建网页结构
美术稿确认后，下一步先构建相应的结构。招生首页的html结构大致如下：
2.3 自适应实现要点
如效果图所示，网站页面需适应浏览设备的不同尺寸，动态地调整布局结构，元素规格样式，将内容按照不同的格式呈现给不同设备尺寸的客户。响应式设计就是通过媒体查询，流式布局和弹性媒体的整合使用，达到更好地调整分辨率的效果。下面就是设计网站时实现响应式的关键技术【1】【3】。
2.3.1 媒体查询
媒体查询可以根据设备显示器的特性为其设定CSS样式。先编写通用版的样式，然后在该样式的基础上扩展其他媒体特性下的样式。现为平板设备和手机增加媒体查询，实现代码如下：
代码中的"media"就是指特定的媒体类型，media 的值可以是屏幕（screen）、打印（print）、支持所有媒体介质（all）等。CSS3的媒体查询还可以获取设备的宽和高的值、设备的手持方向是横向还是竖向、设备的分辨率、色彩深度等值。以上的代码就通过媒体查询针对视口宽度不大于768像素及不大于480像素的情况，调整相关样式。
iOS和Android浏览器都基于 WebKit核心。这两种浏览器以及很多其他浏览器（如 Opera Mobile），都支持用 viewport meta元素覆盖默认的画布缩放设置。我们需要关闭此项功能，禁止浏览器自动调整页面的大小。需要在 HTML的标签中插入一个标签。标签中可以设置具体的宽度（如像素值）或者缩放比例。
上述代码告诉浏览器页面的宽度应该等于设备的宽度。
2.3.2 流式布局
为使页面布局能够灵活适应终端屏幕宽度，招生网站主页采用流式布局，即将页面中栏目的宽度单位设置为相对值，如：
上述代码的含义为：当视口宽度不大于768时，sidebar侧边栏的浮动属性取消，宽度变成自动，则公告栏和快速导航栏会自动下沉。能有效避免传统网页布局对于大小不同屏幕可能会出现大片留白或者拥挤错位的问题。
同时本网站中的字体也使用了相对大小，即用em代替了px，使得网页文字大小可阅读性加强。
2.3.3 弹性视觉媒体
除了布局和文本，本网站还实现了图片等媒体的自动缩放。让图片等也随着显示终端尺寸大小而自动调整至合适尺寸。实现的方式是在 CSS 中添加如下代码：img，object { max-width：100%； } 。
2.4 响应式招生网站测试
3 结束语
本文从惠州市技术学院招生网站的建设出发，讲述了响应式网站的设计及实现要点，并最终实现了响应式招生网站的创建。为学院师生及潜在生源在查阅学院招生信息时提供了更好的使用体验。比较传统的移动版网站，响应式设计体现了较低的开发成本，较快的开发速度和较强的可拓展性。相信响应式技术必将会得到快速发展和普及。
参考文献：
[2] 刘欢，卢蓓蓉.使用响应式设计构建高效新型门户网站[J].中国教育信息化，2013（9）：69-74.
[3] 张幸芝.基于响应式web设计的教务系统移动平台研究与建设[J].软件，2013（06）：5-7.
2222