从一开始 万维网的设计初衷是“不可知”。 无论您使用的硬件如何， 无论您的设备运行什么操作系统，都没有影响。 只要您能连接到互联网，就可以访问万维网。
在网络发展的早期阶段，大多数人使用的都是桌面设备。 如今，桌面设备、笔记本电脑、平板电脑、可折叠手机、冰箱和汽车上都能使用网络。 人们常常希望网站无论使用什么设备都能正常浏览。 自适应设计可以实现这一目的。
响应式设计并不是设计网站的首选方法。 在自适应设计之前的几年里，网络设计人员和开发者尝试了许多不同的技术。
固定宽度设计
20 世纪 90 年代初网络刚刚流行起来， 大多数显示器的屏幕尺寸为宽 640 像素，高 480 像素。 它们是凸起的阴极射线管 不像现在的平面液晶显示屏
<ph type="x-smartling-placeholder">
在早期网页设计的成长期中， 那么设计宽度为 640 像素的网页不失为稳妥的选择。 不过，虽然手机和相机等其他技术正在微型化， 越来越大（最终也更扁平）。 不久之后，大多数屏幕的尺寸都是 800x600 像素。 网页设计也随之进行了相应更改。设计师和开发者开始认为 800 像素是安全的默认值。
<ph type="x-smartling-placeholder">
屏幕又变大了。1024 x 768 成为了默认值。 这就像是网页设计师和硬件制造商之间的一场军备竞赛。
<ph type="x-smartling-placeholder">
无论是 640 像素、800 像素还是 1024 像素 而选择一个特定宽度进行设计就称为“固定宽度设计”
如果您为布局指定固定宽度， 那么您的布局只会在该特定宽度下正常显示。 如果网站访问者的屏幕宽度超过了您选择的宽度，那么屏幕空间就会被浪费。 您可以将页面内容居中，以便更均匀地分布这些空间 （而不是在一侧留出空白区域），但仍然无法充分利用可用的空间。
<ph type="x-smartling-placeholder">
同样，如果访问者到达网页时屏幕的宽度小于您选择的宽度， 那么您的内容就不能横向铺开 浏览器会生成抓取栏（水平相当于滚动条），用户必须左右移动整个页面才能查看所有内容。
<ph type="x-smartling-placeholder">
流动布局
虽然大多数设计师使用的是固定宽度的布局，但也有一些设计师选择让布局具有灵活性。 您可以使用列宽百分比来创建灵活的布局，而不是使用固定的布局宽度。 与只能在一种特定尺寸下正常显示的固定宽度版式相比，这些设计适用于更多情况。
这种布局称为流动版式。 但是，虽然流式布局在各种宽度下都能呈现良好效果，但在极端情况下，效果会开始变差。 在宽屏上，布局看起来像是拉伸变形。 在较窄的屏幕上，布局看起来好像被挤压了。这两种情况并不理想。
<ph type="x-smartling-placeholder">
您可以通过对布局使用 min-width 和 max-width 来缓解这些问题。
但是，对于任何低于最小宽度或超过最大宽度的尺寸，您都会遇到与采用固定宽度的布局一样的问题。
在宽屏设备上，未使用的空间将会浪费。
在较窄的屏幕上，用户必须左右移动整个页面才能看到所有内容。
“液体”一词只是用于描述此类布局的一个术语。 这些类型的设计也称为浮动布局或灵活布局。 术语和技术一样灵活。
小屏幕
在 21 世纪，网络继续发展壮大。 监测系统也是如此。但是，随着新的屏幕的出现，这种屏幕比任何桌面设备都小。 随着手机配备了功能完备的网络浏览器，设计师们正面临着两难的抉择。 他们如何才能确保自己的设计在台式机和手机上都能呈现良好效果？ 他们需要一种方式，针对宽度小至 240 像素、宽为数千像素的屏幕设置内容样式。
单独的网站
一种选择是为移动访问者创建单独的子域名。 但之后您必须维护两个单独的代码库和设计。 要在移动设备上重定向访问者，您需要 用户代理嗅探， 不可靠且容易被仿冒 出于隐私保护方面的原因，Chrome 将弃用其用户代理字符串。 此外，移动设备和非移动设备之间没有明确的界限。您将平板电脑设备发送到哪个网站？
自适应布局
与将单独的网站放置在不同的子网域上， 您的一个网站可能具有两个或三个固定宽度布局。
当媒体查询最初出现在 CSS 中时，它们打开了让布局更加灵活的大门。 但许多开发者仍然最擅长制作固定宽度的布局。 一种技术涉及在指定宽度的若干固定宽度布局之间进行切换。 有人将这种设计称为自适应设计。
自适应设计让设计师能够提供在几种不同尺寸下都有良好的显示效果， 但在这两种尺寸的屏幕上，设计看上去并不恰到好处。 尽管在宽度固定的布局中，多余空间的问题并不严重，但问题依然存在。
借助 CSS 媒体查询，您可以为用户提供最贴近其浏览器宽度的布局。 但由于设备尺寸多种多样，布局对大多数人来说可能并不完美。
自适应网页设计
如果自适应布局是媒体查询和固定宽度布局的混搭，那么自适应网页设计是媒体查询和流动布局的混搭。
这个词的提出是伊桑·马科特 (Ethan Marcotte) 在 A List Apart 发表的一篇文章，2010 年发表。
小伊定义了三个自适应设计标准：
- 流体网格
- 流体媒介
- 媒体查询
自适应网站的布局和图片在任何设备上都能正常显示。但有一个问题。
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 年，确定以固定宽度设计网页是否安全？
流动布局通常在哪种屏幕尺寸下效果不好？
自适应设计的最初三个标准是：
自适应设计是一个充满无限可能的精彩世界。 在本课程的其余部分，您将了解这些技术以及如何使用它们来 适合所有人的自适应网站。