1、响应式网页设计
在响应式网页设计的概念提出之前，网站前端开发者们为了使网站能够适配各种终端设备(PC、手机和平板电脑等)，往往会专门针对不同的终端设备开发出相适配的版本，即一个网站针对不同的终端设备开发出不同的前端版本，从而达到相同的用户体验，但是，如果有几十种甚至上百种不同型号的终端设备，难道都要为其单独开发吗?显然这样的做法并不科学，大大增加了网站的开发成本以及日后的修改成本。于是在2010年5月，一位名为伊桑•马科特的网页设计师首次提出了响应式网页设计(ResponsiveWebDesign)的概念，即为网站开发一个版本的样式，便能自动兼容并适配各种终端设备，且能同时达到相同的用户体验。可以说响应式网页设计的出现，不仅降低了网站的开发成本，还解决了终端设备的兼容问题，同时各大搜索引擎也更喜欢响应式网页设计的网站，响应式网页已成为网站前端设计的首选。
2、高校网站使用响应式网页设计的现状
虽然响应式网页设计的概念早就提出了，但是在我国直到2015年才开始逐渐流行起来(可能与PC和移动设备的市场份额有关)，而高校网站使用的响应式网页设计技术相对比较落后，笔者对全国10个省份，每个省随机抽取了10所高校门户网站以及招生网站统计发现，其中门户网站使用响应式网页设计的高校有43%，招生网站使用响应式网页设计的高校只有10%。从数据和笔者工作的经验来看，高校网站使用响应式网页设计相对落后的原因一是管理者不够重视，没有意识到网站还需要适配移动设备，二是缺少专门进行学校网站开发的专职人员，因此对于新技术的应用还需要一定的时间过程。不过近几年来，越来越多的高校门户网站已经逐渐开始使用响应式网页设计了。
3、响应式网页设计的方法
3.1、响应式网页设计的技术原理。一个标准的网页一般由结构(HTML，XML，XHTML)、表现(CSS)和行为(DOM、ECMAScript)三部分组成，其中结构和表现部分则为响应式网页设计的重要部分，另外CSS3标准的建立也为响应式网页设计奠定了基础。
响应式网页设计的核心技术一般由以下三部分组成：
(1)、媒体查询(MediaQueries)媒体查询又称为媒介查询，即通过CSS3的@media声明来查询展示媒介(终端设备)的显示尺寸，根据不同尺寸的终端设备来选择不同的CSS样式，从而达到网页能自动适配多种终端的效果。@media声明从CSS3开始才被支持，现在的移动设备中的浏览器均支持CSS3，只有PC端的一些老旧浏览器不支持，如IE8以前的版本，很多网站已经放弃这些老旧的浏览器。媒体查询示例代码如下：@mediascreenand(min-width:768px){这里设置您的CSS样式代码}
(2)、网格布局(FlexibleGrids)这里的网格布局是一个宽泛的概念，即结合了流式布局、弹性布局和栅格布局的特性，把整个网页划分成一个个网格，网页上每个网格可以任意组合，最终表现为一个个内容块。通过与媒体查询配合，同时运用流式布局中以百分比或混合百分比作为度量单位的方式和弹性布局中Flex技术，从而实现网页响应式布局的效果。
(3)、弹性图片(FlexibleImages)响应式网页设计中，处理好图片也非常重要。因为现在的网站往往会使用大幅图片来展示内容，这就需要根据终端设备的宽度来自动调整图片的宽度，从而达到更好的显示效果。通常的做法是将图片宽度以百分比来度量，配合max-width或background-size等CSS属性来完成。
3.2、目前主流响应式网页设计开发框架介绍。我们在做网站前端开发的时候，可以借助一些前端开发框架来帮助快速开发网站，这些前端开发框架的原理其实就是将布局系统、排版样式、导航样式、表单样式、按钮样式和表格样式等封装好，我们只需要直接拿来引用，而不需要单独的为每个HTML标签写CSS样式，还能提高界面的美观性。
目前支持响应式网页设计的开发框架有很多，甚至自己也可以开发一套适合的开发框架，下面介绍几种主流的响应式网页设计开发框架。
(1)、Bootstrap由Twitter的工程师开发，是一款集合HTML、CSS和JavaScript的框架，用于开发响应式布局、移动设备优先的网站，且免费开源，拥有庞大的社区支持。
(2)、Foundation由一家专业的产品设计公司ZURB开发，是目前在商业领域使用最为广泛的一款响应式前端开发框架，是一个易用、强大而灵活的框架，且免费开源。
(3)、GroundworkCSS2同样是一款响应式HTML、CSS和Javascript的框架，其官网还提供大量的在线展示示例和开发文档，且免费开源。
3.3、使用响应式前端开发框架来开发高校网站。面对如此繁多的前端开发框架，高校网站只需要挑选其中一款即可满足需求。
通常高校网站前端开发步骤如下(这里仅仅提供一种思路，具体设计开发的细节不展开)：
第一步设计界面，用网格布局的原理，将高校网站的内容设计成一个个区块，比如从页面顶端依次到页面的底端，一般为网站Logo、导航菜单、大图轮播、主要栏目列表、底部联系方式、备案信息和新媒体二维码等。
第二步选择一款主流的前端开发框架，通过前端开发框架的实例，找到适合的界面设计实例，直接拿来使用就可以。
第三步开发调试您的网站，使用Chrome开发者工具可以高效调试您的网站。
这里要注意的一点是，为了确保移动终端的适当缩放，需要在HTML代码的<head>之中添加viewport元数据标签，并设置成<metaname="viewport"content="width=device-width,initial-scale=1">。
