响应式Web设计的研究与实现

郭彦辉

（广州番禺职业技术学院 艺术设计学院，广东 广州 511483）

0 引言

随着各类上网设备的发展和普及使用，用户使用智能手机、平板电脑、桌面电脑和笔记本电脑等设备访问网站的情况普遍。如何使网站内容在各种不同屏幕分辨率下保持良好的显示效果，并使用户获得良好的体验是需要关注和解决的问题。自从Ethan Marcotte提出响应式 Web设计（RWD，Responsive Web Design）[1]概念以来，其设计方法能够使同一网站兼容不同终端设备的访问，而不需要为每个终端定制开发相应的版本，可以有效降低网站开发的复杂性和维护的难度。这种设计方法对于高职院校的网站建设来说同样具有应用价值。本文以学校的招生信息网站改版设计为例，介绍该网站响应式设计实现的过程及技术要点。

1 网站改版需求分析与规划

广州番禺职业技术学院原招生信息网站由多个独立运行的子网站构成，这些子站面向的招生类型不同，先后独立规划设计、开发和管理。随着学校招生宣传和服务工作的推进，网站的内容与功能需求有所变化，需要重新规划设计与开发。为了便于今后对网站的统一管理与维护，同时，也为满足网站来自移动设备访问的需求，此次网站改版的内容主要包括两个方面：（1）将原有多个子站合并成为单独一个网站，并使用网站群系统来实现网站的后台管理功能，学校相关的招生信息将集中统一发布在该网站上。（2）采用响应式设计使网站能够兼容多种主流的终端设备，并且保持统一的设计风格。

在新版招生信息网站的规划中，对原先各子站的内容和功能模块进行调整合并，重新设计网站的信息架构和页面布局。新版网站主要包括招生计划、报考指南、招生咨询和录取查询等主要栏目内容。

2 响应式招生信息网站的实现

2.1 页面设计及构建

以往进行网页设计时，会先以桌面电脑显示器分辨率作为参考进行固定宽度设计，再针对小屏幕进行内容重排。在响应式设计中，应该先针对小屏幕进行设计，再逐步增强针对大屏幕的设计和内容[2]。在智能手机这类小屏幕设备设计中，网站内容按照重要程度自上而下排列显示，内容元素和屏幕等宽，布局结构以竖向单列显示。布局随着设备屏幕尺寸变宽其结构也由单列变成多列形式，页面最宽时适合于桌面电脑的显示。网站首页页面设计简稿如图1所示。

图1 不同显示下的页面设计简稿Fig.1 Brief manuscript with different visual for webpage design

网站首页的html结构大致如下：