响应式网站的设计与开发

2015-06-20张超

电子测试 2015年16期

张超

（安康学院电子与信息工程系，陕西安康，725000）

1 响应式WEB设计概述

1.1 响应式WEB设计理念

响应式Web设计的理念是所设计的网页能够响应设备环境，从而对页面内容布局进行合理调整，最终向用户提供友好的Web上网体验。具体实践响应式设计由多方面技术组成，包括弹性网格和布局、响应式图片、CSS3中媒体查询属性等[1]。采用响应式Web设计的网站，就省去了需要为不同设备做专门版本的设计与开发工作。

1.2 响应式WEB设计的优点和劣势

如果你网站采用的技术是响应式Web技术，你就不用再为网站在不同设备终端的显示效果而担心。响应式Web设计确保用户一直拥有良好的体验效果，这也是响应式设计的初衷。其次，网站运营维护的成本将会减小，且在不同设备间的兼容性强，操作灵活。

响应式网站的设计开发工作比较繁多复杂，且Web前端设计人员对美的感知能力也需要加强。再者，开发响应式网站需要从草图开始重新设计网站结构。最后，由于响应式设计是一种复杂的新技术，在一些老旧的设备和浏览器中会出现，加载页面速度过慢，或是存在完全不支持等问题。

1.3 响应式网站规划设计中需要解决的问题

首先，HTML5的一部分特性与制作更好的响应式网页直接相关，如简洁的代码。HTML5强调简化标签，仅链接那些我们必须的CSS、JavaScript和图片文件。智能手机用户只能使用有限的带宽访问我们的页面，而响应式设计的一个主要目的就是，网站不仅要对用户所使用设备的有限屏幕视口做出响应，还要以最快的速度加载网页。虽然移除冗余的标签元素只能节省一点字节，但积少成多直至最后节省出一片大空间。

其次，采用CSS3的不仅能让页面看起来酷炫异常，还可以让响应式网站加载速度更快，加载所需资源更少，网站在以后更容易维护和修改。CSS3所蕴含的海量利好及精简之道，可以让我们将响应式设计从“一个普通的可响应式网站”提升为“一个面向未来的真正响应式网站”。

最后，Bootstrap是一种HTML、CSS和JS框架，是最受欢迎的用于开发响应式布局、开发移动设备优先的WEB项目。Bootstrap让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

2《心随我悦》响应式网站的具体开发流程

2.1 网站的开发环境及工具

本网站使用Adobe Dreamweaver CS6软件。本网站运行的服务器环境是在WIN7，32位操作系统下，安装微软公司提供的基于Microsoft Windows的互联网基本服务即IIS服务器以及ACCESS数据库，运用ASP动态语言，制作主题为“心随跑悦”的响应式网站。

2.2 网站开发的关键技术

（1）媒体查询。响应式设计的主要方法是使用CSS3媒体查询属性。媒体查询包含了一个媒体类型和媒体属性，其中媒体属性如CSS3规范中描述的包含一个或多个表达式。媒体查询的功能是为每种不同类型的用户提供最佳的Web体验。

CSS3媒体查询属性，已在Safari 3、Firefox 3.5和Opera 7浏览器中得到支持[3]。其测试的属性包括：设备屏幕宽高，屏幕视口的宽高，设备屏幕分辨率等。这些属性可以通过与或非等逻辑运算符，构成复杂的表达式。以此判断目标的设备类型，从而加载相应样式、调整页面布局、提供适合的功能和交互。

（2）Bootstrap框架和Bootstrap的栅格布局系统。Bootstrap来自Twitter是目前最受欢迎的前端框架。它简洁灵活，使得Web开发更加快捷。Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，它包含了丰富的Web组件和自带了13个jQuery插件。Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。

2.3 网站栏目版块的设计和部分关键代码

响应式设计应该遵循移动优先的原则，但严格来说，项目从小屏幕入手过渡到大屏幕（移动优先），还是从大屏幕入手过渡到小屏幕（台式桌面优先）区别不大。该网站采取的台式桌面优先。网站以“心随跑悦”为主题，围绕着“跑步”这一话题分成了跑步指南、悦跑地带、营养健身、跑友图秀、联系我们几大板块。以下以三个栏目的设计为例进行说明：

（1）首页栏目设计。网站的首页，乃至整个网站的设计风格是采用扁平化设计。扁平化设计的核心理念就是：去掉冗余的装饰，让“信息”本身作为核心被凸显出来，且界面干净美观，操作简洁。网站首页的第一屏内容是运用jQuery代码编写的，实现图片轮流显示功能的特效。图片沦陷切换代码（部分）如下,页面效果如图1所示。

var x_sortResolutions = function(){

for(var i=0;i＜options.length-1;i++){

var i_max = i;

for(var j=i+1;j＜options.length;j++)

if(options[j].resolution＞options[i_max].resolution){

i_max = j;

}

if(i_max＞i){

var temp = options[i];

options[i]= options[i_max];

options[i_max]= temp;

}