从一开始，万维网就被设计为独立于您选择的硬件和操作系统。只要您可以连接到互联网，就可以访问万维网。
在 Web 的早期，大多数人都在使用台式计算机。如今，Web 可在台式机、笔记本电脑、平板电脑、折叠屏手机、冰箱和汽车上使用。人们理所当然地期望网站在任何设备上看起来都不错。响应式设计使这成为可能。
响应式设计不是设计网站的第一种方法。在响应式设计出现之前的几年里，Web 设计师和开发者尝试了许多不同的技术。
早期的设计选择
固定宽度设计
在 1990 年代初期，当 Web 首次开始流行时，大多数显示器的屏幕尺寸为 640 像素宽和 480 像素高。这些是凸面阴极射线管，与我们现在拥有的平面液晶显示器不同。
在早期 Web 设计的形成时期，设计宽度为 640 像素的网页是一个稳妥的选择。但是，当手机和相机等其他技术不断小型化时，屏幕却变得越来越大（最终变得更平）。不久之后，大多数屏幕的尺寸都变为 800 x 600 像素。Web 设计也随之发生了变化。设计师和开发者开始假设 800 像素是一个安全的默认值。
然后屏幕再次变大。1024 x 768 成为默认值。这感觉像是 Web 设计师和硬件制造商之间的军备竞赛。
无论是 640 像素、800 像素还是 1024 像素，选择一个特定的宽度进行设计都称为固定宽度设计。
如果您为布局指定了固定宽度，则您的布局仅在该特定宽度下看起来不错。如果您的网站访问者的屏幕宽度大于您选择的宽度，则屏幕上会有浪费的空间。您可以将页面内容居中以更均匀地分布该空间（而不是在一侧留有空白空间），但您仍然无法充分利用可用空间。
同样，如果访问者的屏幕宽度小于您选择的宽度，则您的内容将无法水平容纳。浏览器会生成一个滚动条（水平方向的滚动条），用户必须左右移动整个页面才能看到所有内容。
流式布局
虽然大多数设计师都使用固定宽度布局，但有些人选择使他们的布局更灵活。您可以使用百分比作为列宽，而不是为布局使用固定宽度，从而制作出灵活的布局。与仅在一个特定尺寸下看起来合适的固定宽度布局相比，这些设计在更多情况下都适用。
这些被称为流式布局。但是，虽然流式布局在各种宽度下看起来都不错，但在极端情况下会变得更糟。在宽屏幕上，布局看起来会拉伸。在窄屏幕上，布局看起来会挤压。这两种情况都不理想。
您可以使用布局的 min-width 和 max-width 来缓解这些问题。但是，在任何小于最小宽度或大于最大宽度的尺寸下，您都会遇到与固定宽度布局相同的问题。在宽屏幕上，会有未使用的空间被浪费。在窄屏幕上，用户将不得不左右移动整个页面才能看到所有内容。
流式只是用于描述此类布局的术语之一。这些类型的设计也称为自适应布局或弹性布局。术语与技术一样具有流动性。
为不同的屏幕尺寸构建
在 21 世纪，Web 继续变得越来越大。显示器也是如此。但是，新的屏幕出现了，它们比任何桌面设备都小。随着具有全功能 Web 浏览器的手机的出现，设计师面临着一个难题。他们如何确保他们的设计在台式计算机和手机上看起来都不错？他们需要一种方法来为宽度小至 240 像素和宽度大至数千像素的屏幕设置内容的样式。
单独的站点
一种选择是为移动设备访问者制作单独的子域。但是，这样您就必须维护两个单独的代码库和设计。为了重定向移动设备上的访问者，您需要进行 用户代理嗅探，这可能不可靠且容易被欺骗。Chrome 已经减少了用户代理字符串，以防止此类被动指纹识别。此外，移动设备和非移动设备之间没有明确的界限。您将平板电脑设备发送到哪个站点？
自适应布局
您可以拥有一个包含两到三个固定宽度布局的单个站点，而不是在不同的子域上拥有单独的站点。
当媒体查询首次出现在 CSS 中时，它们为使布局更灵活打开了大门。但是，许多开发者仍然最习惯制作固定宽度布局。一种技术涉及在指定的宽度下在少数几个固定宽度布局之间切换。有些人称之为自适应设计。
自适应设计允许设计师提供在几种不同尺寸下看起来不错的布局，但当在这些尺寸之间查看时，设计看起来总是不太合适。多余空间的问题仍然存在，尽管它没有固定宽度布局那么糟糕。
使用 CSS 媒体查询，您可以为用户提供最接近其浏览器宽度的布局。但是，考虑到设备尺寸的多样性，布局很可能对大多数人来说看起来都不太完美。
响应式 Web 设计
如果自适应布局是媒体查询和固定宽度布局的混合，那么响应式 Web 设计就是媒体查询和流式布局的混合。
该术语由 Ethan Marcotte 于 2010 年在 A List Apart 中的一篇文章中创造。
Ethan 为响应式设计定义了三个标准
- 流式网格
- 流式媒体
- 媒体查询
响应式站点的布局和图片在任何设备上看起来都不错。但是，有一个问题。
用于 viewport 的 meta 元素
移动电话上的浏览器必须处理为更宽屏幕的固定宽度布局设计的网站。默认情况下，移动浏览器假定人们设计的宽度为 980 像素（他们并没有错）。因此，即使您使用了流式布局，浏览器也会应用 980 像素的宽度，然后将渲染的网页缩小到屏幕的实际宽度。
如果您使用响应式设计，则需要告诉浏览器不要进行缩放。您可以使用网页 head 中的 meta 元素来做到这一点
<meta name="viewport" content="width=device-width, initial-scale=1">
有两个值，用逗号分隔。第一个是 width=device-width。这告诉浏览器假定网站的宽度与设备的宽度相同（而不是假定网站的宽度为 980 像素）。第二个值是 initial-scale=1。这告诉浏览器要进行多少缩放。对于响应式设计，您不希望浏览器进行任何缩放。
有了该 meta 元素，您的网页就可以进行响应式处理了。
现代响应式设计
现在，我们可以制作响应式网站，其响应方式远远超出视口尺寸。媒体功能使开发者可以访问用户偏好并实现自定义体验。容器查询使组件可以拥有自己的响应式信息。picture 元素使设计师能够根据屏幕比例做出艺术指导决策。
检查您的理解情况
测试您对响应式 Web 设计的知识
在 2021 年，以固定宽度设计网页是否是稳妥的选择？
流式布局通常在哪些类型的屏幕尺寸下表现不佳？
响应式设计的最初三个标准是什么？
响应式设计是一个激动人心、不断发展的充满可能性的世界。在本课程的其余部分中，您将了解这些技术以及如何使用它们为所有人创建美观的响应式网站。