响应式设计简介

响应式设计，就是让同一个页面在不同的分辨率下都要呈现出最佳效果，提升用户体验。
很容易想到，设计思路就是针对不同的分辨率，为页面设置不同的样式，下面我们就来看看如何实现。不过在此之前，还需要先了解下面两个东西。

viewport

viewport 就是屏幕上用来显示页面内容的那部分区域。 默认情况下，移动设备上的viewport是大于屏幕宽度的，这是为了确保能够展示那些针对传统PC端开发的网页。大部分移动设备的默认viewport都在980px左右。 这样就会造成浏览器横向的滚动条出现。有些设备为了避免滚动条出现，会自动缩小网页内容，使内容适应屏幕宽度，这样就会造成屏幕上的内容非常小，难以看清。 以上两种处理方式都不是我们希望看到的，因此，需要首先将这个viewport设置为设备的宽度，设置缩放比例为1：1，代码如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

注意：这里关于viewport的解读比较简单，详细的可以参考这篇文章。

媒体查询

媒体查询是写在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 规则/ }