响应式网页设计(Resposive web design)也被称为RWD，或者我们称为自适应网页设计，是一种网页设计的技术做法。虽然我们前面说到的是移动端，但是概念上，RWD目的是使网站能在多种浏览设备上阅读和导航，同时减少缩放，平移和滚动。接下来我们开始学习下响应式网页设计中需要的知识吧。

viewport

这个是我们必须要知道的,就和下面这段html代码一样

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

viewport就是用户网页的可视区域，而viewport随着设备的变化，在移动端上会小于PC端。

在平板电脑和移动电话出现之前，网页值需要根据电脑屏幕设计即可，现在可就不同了，在移动端上PC端的设计会太大以至于无法适应viewport，而通常为了解决这个问题，浏览器会自动的缩小了网页并显示在移动端上。

我们之前写的那段<meta>标签又代表着什么呢？

一个<meta name="viewport">标签代表着一份如何控制页面大小与缩放的说明书。width=device-width这部分就和字面意思一样将页面宽度设置为设备宽度，而initial-sacle=1.0则是设置为初始缩放比例为1.0，如果不设置将会在切换横屏时保持之前的页面宽度.

像素与DIP与pixel ratio

我们需要理解一下像素和DIP(device independent pixel，设备独立像素)，假设我们有一台2560px宽的设备，如果我们DIP为1280，则我们的pixel ratio为2。我们的浏览器并不是根据物理硬件的宽度而工作的，而是根据DIP宽度工作的，它将像素与实际距离关联起来。这部分我们就到此为止吧，稍作了解就好哦。

媒体查询(Media Query)

媒体查询(Media Query)这也是我们谈到响应式不得不谈的一部分，媒体查询是什么呢，正如我们下面所写的代码这样就是所谓的媒体查询了。

media screen and (min-width:500px) and (max-width:600px)

媒体查询的使用方式

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

媒体查询包含一个媒体类型和至少一个类似(max-width: 500px)限制范围表达式。在mdn上详细的介绍，在响应式布局中我们只要记住screen and ()[and ()]这种形式就可以了。

断点(Breakpoints)

在媒体查询中我们设置了不同的样式，通过不同的宽度变化来更改应用的样式，而这个样式变化的条件(临界点)就是我们这里所谈的断点了，断点的设置对于我们响应式设计是十分重要的，在这里我根据网上的资料总结一下断点如何设置。

首先，我们设计响应式网页要移动为先，意思就是我们要先设计移动端上的网页，然后再在宽度逐渐增长的情况下慢慢寻找自己心中的断点，并进一步设计宽度更大情况下的网页布局，从mobile->tablet->PC，逐步设计，也是所谓的渐进增强。

栅格设计(grid)和弹性盒(Flex box)

grid，我们最常见的一种响应式设计的模式，它将页面分割为一个个动态网格，并且在宽度变小的情况下会顺延到下一格，我们常见的使用了grid的范例如bootstrap等都十分的简单易用。

而flex box正是目前最热门的，并且被各浏览器强烈推荐的一种模式，但是在使用前首先我们要确保我们做好了各个浏览器的兼容，包含了所有版本的浏览器引擎前缀。关于flex box，可以看看我这篇博文。

怎么做？常见的模式

最小视窗模式时，我们三个内容块每一个都占据一行，并且随着宽度的增加，到达断点时，则前两个内容块一起占据一行，再根据宽度增加，到达断点时，则三个内容块一起占据一行并且开始随着宽度的增加而不再延伸，从而变为增加外边距。

大体流动模型(mostly fluid)

这与掉落列模型相似，但是更像grid。最小视窗模式时，我们内容块每个都与掉落列模型(column drop)一样每一个都占据一行，随着宽度的增加，列出现并把二三块一起占据一行，然后随着宽度的增加我们可以展示多个列，并在最后断点时，宽度固定并且随着宽度增加而增加外边距。

活动布局模型(Layout Shifter)

可以说是最灵活的布局模型，我们不是单纯的更改重排到其他列下方，而是可以更改模块的顺序，也就是使用order属性。

画布溢出模型(off canvas)

简单来说就是将不常用的导航或菜单放在画布之外，如导航栏变为按键。