【Bootstrap】响应式原理和设计

       响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：为什么一定要为每个用户群各自打造一套设计和开发方案？Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式；我们应当向下兼容、移动优先。

      响应式网站设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了

      首先我们应该遵循移动优先原则，交互&设计应以移动端为主，PC则作为移动端的一个扩展；一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：

• 响应式布局
• 响应式内容（图片、多媒体）

     响应式实现有3个主要的方法：

1. 设备检测

2. 通过JS检测屏幕宽度，更换样式表

3. CSS3中媒体查询，更换样式表
   

1、设备检测

     我们访问新浪网的时候，当输入网址www.sina.com.cn的时候，检测用户的设备，如果用户用的是PC，那么留在原地。如果检测到用户是手机访问的，就跳转到https://sina.cn/?from=web这个网址去。

     那么为了实现这个效果，我们可以用一个库，device.min.js。这是一种最简单的方法。device.js库，不依赖jQuery框架。代码如下：