响应式网页设计是一种新的设计思想, 而不仅是简单的CSS改写。响应式网页设计理念^[5]是: 集中创建页面的内容排版设计, 使其可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕分辨率、屏幕定向等)进行相对应的布局。

响应式网页设计采用灵活的网格布局, 关键技术包括: 液态布局、媒体查询(Media Queries)和JavaScript脚本等。其原理基于以下4个方面:

(1) 调整分辨率

响应式设计就是要同时兼容不同分辨率和定向方式, 将各种主流屏幕尺寸规格分类, 为每一类做一种展示方案, 并确保该方案在本组中尽量具有较好的展示效果。

(2) 赋予弹性化

无论用户切换设备的屏幕定向方式, 还是从PC转到Tablet上浏览, 页面都会富有弹性去适应。比如将浏览器窗口不断调小时, 文字部分始终会保持同比缩小, 保证其完整可读; 图片和表格的尺寸会自动调整, 保证页面布局不会被破坏。

(3) 重构布局

同比例缩减元素尺寸以及调整页面结构布局, 是实现响应式设计的两个重要方法。当页面所需要适应的不同设备的屏幕尺寸差异过大时, 应该考虑到重构整个布局。

(4) 调整样式

随着访问终端屏幕变小, 各元素的样式也需要调整, 比如采用更简化的导航、更易聚焦的内容、信息列表等方案。

对用户使用的主流访问设备进行详细调查和分类。确定屏幕分辨率的断点(Breakpoint), 依据断点划分不同的分辨率区间, 在不同的分辨率区间设计不同的页面布局和样式。屏幕显示效果需考虑的因素包括: 不同设备各自的屏幕分辨率大小; 智能手机和平板电脑的横屏和竖屏尺寸; PC显示器分为普通屏幕和宽屏。笔者调查发现, 主流访问设备分为智能手机、Tablet和普通PC。以设备能达到最好浏览效果为前提, 结合用户需求和实现成本, 选取三个断点: 960像素(PC桌面显示器)、768像素(Tablet竖屏宽度)、480像素(智能手机横屏宽度), 它们分别是各类主流设备屏幕宽度分辨率的下限, 能确保网站设计方案在各类设备中尽量具有弹性。同时, 响应式设计还可以设置新断点, 重构布局, 调整样式以适应未来设备的发展, 故具有良好的扩展性。

主题用于提供网站不同的页面设计风格。Drupal提供了大量基于响应式设计的主题, 如Zen、Bootstrap等。根据网站功能和内容进行页面设计, 再基于设计效果图选择最适合的响应式主题来定制开发自己的主题。选择主题需考虑的因素有: 选择与效果图中内容区域(Region)划分基本相同的主题, 减少自定义区域代码编写; 选择断点相同的响应式主题, 减少响应式设计底层CSS网格代码重复编写; 选择满意的手机端效果组件, 如手机端的菜单、幻灯等显示效果; 尽可能选择安装量高的主题, 因为其有详细的帮助文档。综合考虑以上因素, 选择Premium Responsive主题。

模块是提供扩展功能的代码片段。Drupal中很多模块是针对响应式设计开发的, 具体的选择需根据用户的功能需求、喜好和模块的安装量来确定。以本站为例, 使用Responsive Menus模块实现主菜单在移动端自动缩小为下拉菜单的效果; 使用FlexSlider模块实现移动端首页幻灯图片的自适应效果和手指滑动切换图片的功能; 使用Adaptive Image模块实现图片的自适应缩放; 使用Reponsive Table模块实现表格移动端的响应式设计。

采用网格系统(Grid System)定义每种关键规格中的页面布局。根据预先确定的屏幕分辨率断点, 需设计PC、Tablet和智能手机三种页面布局, 由于本站结构相对简单, 栏目并不多, 因此采用同等比例缩减元素尺寸的方法, 将PC和Tablet页面布局设计为一种, 因而创建两个页面布局模板, 分别如图1和图2所示:

图1

	Figure Option ViewDownloadNew Window
	图1 PC和Tablet页面布局

图2

	Figure Option ViewDownloadNew Window
	图2 智能手机页面布局

本站根据960网格系统布局, 把页面的父级容器宽度设置为固定的960像素, 对于PC桌面浏览环境, 该宽度适用于任何大于960像素的分辨率。当访问媒体的宽度大于等于768像素时, 如图3所示, Logo和导航在同一行区域, 导航里面的“ 首页” 、“ 资源” 、“ 服务” 、“ 咨询互动” 、“ 公告新闻” 、“ 关于图书馆” 、“ 我的空间” 等菜单是平铺的。当访问媒体的宽度小于768像素时, 如图4所示, Logo和导航变为两行区域, 导航上的菜单都收缩到“ Menu” 下拉菜单里面, 通过单击该下拉菜单, 选择需要的栏目。幻灯实现了等比缩放和手指滑动。右边栏的“ 公告” 、“ 资源动态” 栏目, “ 新生培训” 图片自动浮动到下方, 下方的“ 论文提交” 等4个链接也自动变为一列摆放, 使整个页面的主体内容由两列布局变为一列布局。文字显示位置则是动态适应访问媒体的屏幕尺寸。

图3

	Figure Option ViewDownloadNew Window
	图3 PC和Tablet首页效果

图4

	Figure Option ViewDownloadNew Window
	图4 智能手机首页效果

对于二级、三级页面, 由于有面包屑导航^①(① 面包屑导航是用来表达内容归属关系的界面元素, 让用户了解其目前所处位置, 并提供返回各个层级的快速入口。) (Breadcrumb Navigation), 因此手机端采取隐藏左导航栏的方式进行重新布局, 从而使其获得良好的阅读效果。

(1) 960网格系统

960 网格系统^[7]是由Nathan Smith开发的CSS框架, 运用固定的格子设计版面布局。本站使用的是16列的版本, 它比较适合于中文网站。

将960网格系统的CSS代码写入自定义的responsive-style.css文件, 通过Drupal主题中的info文件进行加载。代码如下:

stylesheets[all][] = css/responsive-style.css

(2) 媒体查询(Media Query)

媒体查询是响应式网页设计最核心的技术, 是CSS3中才提出的功能, 通过@media响应式布局的形式, 根据客户端的介质和屏幕分辨率, 选择应用不同的CSS规则。

创建CSS样式表, 并在页面中调用, 本站采用直接写入responsive-style.css样式表文件中。

当在PC桌面显示器上访问页面时, 页面宽度设计为960像素。

/* #Base 960 Grid* /

.container { position: relative; width: 960px; margin: 0auto;
padding: 0; }

.column, .columns { float: left; display: inline; margin-left: 10px;
margin-right: 10px; }

.row { margin-bottom: 20px; }

当用Tablet竖屏浏览可视部分宽度大于768像素小于960像素时, 将页面宽度设为768像素, 其他属性做相应的调整。

/* #Tablet (Portrait) Note: Design for a width of 768px * /

@media only screen and (min-width: 768px) and (max-width:
959px) {

.container { width: 768px; }

.container .column, .container .columns { margin-left: 10px;
margin-right: 10px; }

.column.alpha, .columns.alpha { margin-left: 0;
margin-right: 10px; }

.column.omega, .columns.omega { margin-right: 0;
margin-left: 10px; }}

当用智能手机竖屏浏览可视部分宽度大于320像素小于768像素时, 将页面宽度设置为98%。

/* #Mobile (Portrait) Note: Design for a width of 320px * /

@media only screen and (max-width: 767px) {

.container { width: 98%; height:auto; display:block; }

.columns, .column { margin: 0 1%; }

当用智能手机横屏浏览, 可视部分宽度大于480像素小于767像素时, 将页面宽度设置成96%。禁用HTML节点的字号自动调整。

/* #Mobile (Landscape) Note: Design for a width of 480px * /

@media only screen and (min-width: 480px) and (max-width:
767px) {

.container { width: 96%; height: auto; display: block; }

.columns, .column { margin: 0 2%; }}

(3) 网页宽度自动调整

.main { float: right; width: 70%; }

.leftBar {float: left; width: 25%; }

使用相对宽度的同时使用Float属性, 它的好处是如果宽度太小, 放不下两个元素, 后面的元素会自动滚动到前面元素下方, 不会在水平方向溢出, 避免了水平滚动条的出现。

(4) 浏览器兼容性

本站利用工具IE Tester, 对IE各版本浏览器进行测试。第一次开发完成的网站, 只在IE9及以上版本和Chrome、Firefox上正常显示, 而在IE6、IE7、IE8上样式是乱的, 解决方法是采用CSS Hack, 针对不同的浏览器编写不同的CSS 样式。例如:

div {

width: 300px;

height: 200px;

margin-top: 20px; /* Firefox * /

margin-top: 20px\9; /* All IE * /

margin-top: 30px\0; /* IE 8 * /

+margin-top: 30px; /* IE 7 * /

_margin-top: 30px; /* IE 6 * /

}

:root div {

margin-top: 20px\9; /* IE 9 * /

}

(5) 移动端测试

本站对不同分辨率的移动设备进行测试。测试的方法是利用响应式网站测试站点和工具, 如http:// www.responsinator.com/和Responsive Design工具, 只要输入待测试网站的域名, 即可得到在多种移动设备上的显示效果; 或者直接用各主流移动设备访问网站, 以获得真实的用户体验。