从一开始，万维网就被设计为不可知悉。 无论您拥有什么硬件，都无关紧要。无论您的设备运行的是哪种操作系统，都无关紧要。只要能连接到互联网，您就可以访问万维网。
在网络发展初期，大多数人使用的都是桌面设备。 如今，人们可以在台式机、笔记本电脑、平板电脑、可折叠手机、冰箱和汽车上使用网络。 用户会理所当然地希望，无论他们使用什么设备，网站都能正常显示。 自适应设计使这成为可能。
自适应设计不是设计网站的首选方式。在自适应设计之前的几年，网页设计师和开发者尝试了许多不同的技术。
固定宽度设计
20 世纪 90 年代初，当网络初次流行时，大多数显示器的屏幕尺寸均为 640 像素宽 x 480 像素高。这些是凸形阴极射线管，不同于我们现在的扁平液晶显示屏。
在早期网页设计的发展时期，设计宽度为 640 像素的网页是稳妥的选择。不过，虽然手机和相机等其他技术都在微型化，但屏幕却越来越大（最终也越来越扁平）。不久之后，大多数屏幕的尺寸为 800x600 像素。网页设计也进行了相应的更改。设计师和开发者开始假设 800 像素是一个安全的默认设置。
屏幕又变大了。1024 x 768 成为了默认值。 这感觉就像是网页设计师和硬件制造商之间的军备竞赛。
无论选择 640、800 还是 1024 像素，选择一个特定宽度来进行设计，这种设计称为“固定宽度设计”。
如果您为布局指定固定宽度，则布局只会在该特定宽度下呈现良好效果。如果网站访问者的屏幕宽度大于您选择的宽度，屏幕空间就会浪费。 您可以将页面内容居中，以更均匀地分布空间（而不是在一侧留出空白空间），但仍然无法充分利用可用空间。
同样，如果访问者到达网页时所用的屏幕比您选择的宽度更窄，则您的内容在水平方向上也不适合。浏览器会生成抓取条（相当于滚动条的水平方向），因此用户必须左右移动整个页面，才能查看所有内容。
流式布局
虽然大多数设计人员都使用固定宽度的布局，但也有一些设计人员选择让布局灵活变通。您可以使用百分比形式的列宽来设计灵活的布局，而不是使用固定宽度的布局。 与只能在一种特定尺寸下正常显示的固定宽度布局相比，这些设计适用于更多情况。
这些布局称为流式布局。 虽然流动布局在各种宽度下都有良好的显示效果，但在极端情况下会开始变差。 在宽屏上，布局看起来像是拉伸了。在窄屏幕上，布局看起来像是扁平的。这两种情形都不理想。
您可以通过在布局中使用 min-width 和 max-width 来缓解这些问题。但是，如果尺寸小于最小宽度或大于最大宽度，就会出现与固定宽度布局相同的问题。
在宽屏设备上，会浪费未使用的空间。
在较窄的屏幕上，用户必须左右移动整个页面才能看到所有内容。
liquid 只是用来描述此类布局的术语之一。 此类设计也称为流式布局或灵活布局。这个术语与技术一样流畅。
小屏幕
在 21 世纪，网络不断发展壮大。 显示器也是一样的。不过，新出现的屏幕比任何桌面设备都小。 随着配备完善的网络浏览功能的手机的面世，设计人员面临着两大困境。 他们如何才能确保自己的设计在桌面设备和手机上都有出色的显示效果？ 他们需要一种能为宽度小至 240 像素、大至数千像素宽的屏幕设置内容样式。
单独的网站
一种方法是为移动访问者创建单独的子网域。 但是，您必须维护两个单独的代码库和设计。为了在移动设备上重定向访问者，您需要执行用户代理嗅探，这种操作可能不可靠，也容易被仿冒。出于隐私保护方面的考虑，Chrome 将弃用其用户代理字符串。 此外，移动设备和非移动设备之间也没有明显的区别。您会将平板电脑设备发送到哪个网站？
自适应布局
您可以让一个网站具有两个或三个固定宽度布局，而不是在不同子网域上有单独的网站。
当媒体查询首次到达 CSS 时，它们开启了让布局更加灵活的大门。 但是，许多开发者仍然非常熟悉创建固定宽度布局。一种技术涉及在指定宽度的一些固定宽度布局之间切换。有些人将其称为自适应设计。
借助自适应设计，设计人员能够提供在几种不同尺寸下都有良好呈现效果的布局，但设计在这些尺寸下呈现效果从来不太好。虽然不像在固定宽度布局中那样严重，但多余空间的问题仍然存在。
使用 CSS 媒体查询，您可以为用户提供与其浏览器宽度最接近的布局。 然而，考虑到设备尺寸多种多样，布局可能对大多数人来说都不太完美。
自适应设计
如果自适应布局是媒体查询和固定宽度布局的混搭，那么自适应设计就是媒体查询和流动布局的混搭。
“A List Apart”一词由 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 元素，设计人员能够根据屏幕宽高比做出艺术设计方向。
检查您的掌握程度
测试您对自适应设计方面的知识掌握情况
2021 年，设计固定宽度的网页是否稳妥？
流式布局通常难以适应哪些类型的屏幕尺寸？
自适应设计最初的三个标准是什么？
响应式设计是一个充满活力且充满无限可能的世界。在本课程的其余部分，您将了解这些技术以及如何利用它们为所有用户打造精美且响应迅速的网站。