1.2　什么是响应式设计

页面可以根据用户的终端设备尺寸或浏览器的窗口尺寸来自动地进行布局调整，这就是响应式布局设计。目前，用户终端设备可谓是种类繁多、琳琅满目。我们细想一下，从台式显示器到笔记本电脑屏幕，从平板电脑再到手机界面，同一类设备但不同厂家的产品屏幕尺寸不尽相同，设计起页面来，难度较大。响应式布局就是为了解决这个问题而诞生的，且目前已经是主流的设计方式了。

图1.1就是一个直观的响应式布局设计示意图，图中演示了同一个页面在台式显示器、iPad及iPhone三种设备屏幕尺寸上呈现的效果。

图1.1　响应式布局设计示意图

下面再来看图1.2和图1.3，这是两个典型的响应式设计案例，读者可以直观地感受一下。

图1.2　响应式设计案例1

图1.3　响应式设计案例2

近年来，移动互联网发展势头非常迅猛，尤其是高性能智能手机和平板的普及，使得在移动设备上浏览绚丽的页面成为可能（相对于曾经的WAP手机站来说）。响应式设计越来越流行，Bootstrap框架就是因此应运而生的。可以说，Bootstrap框架的出现解决了之前一直困扰设计人员的终端设备屏幕尺寸的兼容性问题，是广大前端设计开发人员的福音。