响应式设计简介
响应式设计，就是让同一个页面在不同的分辨率下都要呈现出最佳效果，提升用户体验。
很容易想到，设计思路就是针对不同的分辨率，为页面设置不同的样式，下面我们就来看看如何实现。不过在此之前，还需要先了解下面两个东西。
viewport
viewport 就是屏幕上用来显示页面内容的那部分区域。 默认情况下，移动设备上的viewport是大于屏幕宽度的，这是为了确保能够展示那些针对传统PC端开发的网页。大部分移动设备的默认viewport都在980px左右。 这样就会造成浏览器横向的滚动条出现。有些设备为了避免滚动条出现，会自动缩小网页内容，使内容适应屏幕宽度，这样就会造成屏幕上的内容非常小，难以看清。 以上两种处理方式都不是我们希望看到的，因此，需要首先将这个viewport设置为设备的宽度，设置缩放比例为1：1，代码如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
注意：这里关于viewport的解读比较简单，详细的可以参考这篇文章 http://www.cnblogs.com/2050/p/3877280.html
媒体查询
媒体查询是写在CSS中的一段代码，作为其他CSS代码的容器。容器中的css代码只有在媒体查询条件的情况下才会生效。例如屏幕宽度<980px，网页正在打印时等。 有2种方式可以添加媒体查询，@media规则和<link>标签的media属性。
响应式设计步骤
通过上面介绍，我们了解到响应式设计的第一步需要在页面中添加如下代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
然后就是设置各个分辨率下的样式了。但屏幕的分辨率种类实在太多了，我们不可能一一穷举出来，也没有必要这么做。 实际上可以将分辨率划分成几个范围，然后分别设置这几个范围内的样式。不同范围的分界点叫做响应式布局的 断点。
关于断点的选择，不同的前端框架都有各自的选择，但总体上都是按照手机、平板、PC几个范围来的。如bootstrap3的选择：
Extra small devices Phones (<768px)
Small devices Tablets (≥768px)
Medium devices Desktops (≥992px)
Large devices Desktops (≥1200px)
断点（breakpoint）的具体写法类似如下形式: @media screen and (min-width:640px) { /CSS 规则/ }
