何 莉

（长江职业学院 湖北 武汉 430074）

1 引言

随着移动互联网时代的到来，移动端网页使用量逐年提升。响应式网页设计是指在网页设计与开发时，根据用户的设备环境和行为习惯进行相对应的调整，同一个网页能够自适应多个终端设备，而不是为每个终端分别设计特定的版本。响应式网页设计的优势在于既能提高代码利用率，又能根据不同的设备尺寸呈现出不同的页面效果，有效提升用户体验度。

2 相关技术简介

2.1 响应式网页设计

响应式网页设计最初是由伊桑·马卡特（Ethan Marcotte）提出来的，来源于他曾发表的“Responsive Web Design”文章中提出的一个概念、一门新兴的学科——“响应式架构(responsive architecture)”，并提出了物理空间应该可以根据存在于其中的人的情况进行响应。响应式是一种全新的网页设计理念，提倡向下兼容、移动优先，最终实现同一个网页能够自适应多个终端设备。

2.2 Bootstrap简介

Bootstrap来自Twitter，是目前非常受欢迎的前端开源工具包，用于快速开发Web项目和应用程序。Bootstrap基于HTML、CSS、JAVASCRIPT，自2011年8月在GitHub上发布，推出以后颇受广大用户青睐。Bootstrap中预定义了一套CSS样式以及与样式相对应的jQuery（jQuery是一个快速、小巧、功能丰富的JAVASCRIPT库）代码。在网页开发时，首先要在HTML结构的之间引入“bootstrap.min.css”，接着在之间引入“bootstrap.min.js”，然后在class类名称中引入Bootstrap中的样式类，即可实现预期的网页效果[1]。

2.3 Bootstrap的优势

基于Bootstrap前端框架的响应式网页设计，能够自适应于普通电脑、平板电脑和手机等不同终端。自Bootstrap3开始，移动设备优先的CSS样式便一直贯穿始终。目前几乎所有主流浏览器都支持它，包括IE、Firefox、chrome、Safari等。……