在最近的几个课时中，我们一直都在编码，现在，让我们来讲解理论知识。 在过去几年中，各种硬件设备出现了爆炸式的增长。你可以购买台式机，笔记本电脑，平板电脑，智能手机，智能手表，智能电视等等。屏幕尺寸的各异。 那么我们如何设法创建一个网站来适应所有屏幕的尺寸呢？ 实际上，我们已经写了很多代码。现在，我们的网站在较小的屏幕上最好看。接下来，我们可以进行一些小的修改，让我们的网站在平板电脑上，在桌面上都非常好看。 我们的网站使用了一种称为响应式网页设计的技术。进一步说，我们采用了移动优先的方法来响应网页设计。我们首先设计了网站的移动版本，而不是设计桌面版。 这是因为从简入奢易，从奢入简难，桌面的设计要比移动设备复杂一些。 响应式网页设计是一个重要的概念，让我们来详细看看。 打开index.html，现在，这是我们网站的最新版本。如果我调整我们的网页浏览器的大小，你会注意到，随着浏览器的宽度的增加或减少，网站的布局会弹性改变。这被称为流体布局。 目前，当页面的宽度很窄，比如移动设备，我们的页面看起来不错。但是，当该页面非常宽时，就像在桌面设备或平板电脑上一样，这个页面看起来就有些难看了。比如说，当宽度增到最大，导航标签变得很小，不方便选择，而相对于整体的页面布局来说，图片又变得很大。那么要实现修改，我们需要使用一种被称为响应式网页设计的技术，它是创建适应多设备网站的最佳方式之一。响应式网页设计不只是一项技术。相反，实际上，它是三个小步骤的集合，分三步， 第一步是创建流体图像。这很简单，实际上，我们已经做了这个技术。打开CSS，来到GENERAL下的img，您可以看到最大宽度设置为100％。
img{ |
第二步是创建流体网格。我们在这个网站上并没有使用网格，但我们的布局依旧流畅。我们从一开始就通过使用百分比来定义元素的宽度而不是通过像素。因为百分比是相对单位，它们会根据其父容器的宽度来更改宽度。因为一切都是相对的，所以我们在页面上的嵌套元素会根据浏览器的相对宽度而改变。 第三步是使用一个称为media query的特殊CSS规则。我们还没有讲解过media query，但他们将允许我们根据页面的宽度来更改元素的布局。 在接下来的几节课时中，我们将添加多个media query，它将允许我们的布局响应不同的屏幕分辨率。 更多精彩内容尽在视频中！
