[课程笔记]学习网页响应式设计 - 01 - 响应式设计简介
原文地址：https://web.dev/learn/design/intro/
文章中的所有截图均来源于互联网档案馆：https://archive.org
文章目录：
前世
一开始，万维网就被设计为不可知论者。你拥有什么硬件、设备运行什么操作系统并不重要。只要你可以连接到互联网，你就可以访问万维网。
早期大多数人都在使用台式电脑。但如今，网络可以在台式机、笔记本电脑、平板电脑、智能手机、冰箱和汽车上使用。人们期望不管使用什么设备，网站看起来都与设备配合“亲密无间”。响应式设计使这成为可能。
响应式设计并不是设计网站的第一种方法。在响应式设计之前的几年里，网页设计师和开发者尝试了许多不同的技术：
固定宽度设计
在 1990 年代初期，那个时候网络刚开始流行，大多数显示器的屏幕尺寸为 640x480 。大家都在大头机上查看网页，和当今的平板液晶显示器的体验完全不同。
下面是带有两个简单文本列和一个导航栏的 Microsoft 网站。
90 年代后期的微软网站设计为 640 像素的宽度。
在早期网页设计的形成时期，设计宽度为 640 的网页是安全的选择。当然了，毕竟那个时候大多数显示器尺寸都是 640 宽度，设计宽度正好占据全屏。
不过，尽管当时手机和相机等其他终端正在变得越来越小，但是屏幕却变得越来越大（并最终变得更平。如果你对显示器的演进历史感兴趣，推荐看一下 B 站红酒汤姆一世的 这篇视频 ）
不久之后，大多数屏幕的尺寸变为 800x600，网页设计也相应的发生了变化。设计和开发人员开始假设 800 为安全的默认宽度。
下面是使用三栏的微软网站，主要是基于文本的设计。2000 年代初期的 Microsoft 网站设计为 800 像素的宽度。
然后屏幕又变大了。1024x768 成为了默认值。
这就像网页设计师和硬件制造商之间的军备竞赛（并不
下面是使用图像和文本进行更复杂设计的 Microsoft 网站。2000 年代中期的 Microsoft 网站设计为 1024 像素的宽度。
如果你为布局指定固定宽度，那么你的布局只会在这个特定的宽度下看起来不错。如果网站访问者的屏幕比你选择的宽度更宽，那么就会“浪费”屏幕上的空间。虽然可以将页面居中以更均匀的分配该空间，但是仍然不会充分利用可用空间。
一个狭窄的地方，周围有很多空白。2000 年代初期的 Yahoo 网站在浏览器中的体验比该网站的 800 像素宽设计更宽。
同样，如果访问者终端的屏幕宽度比网页预设的宽度窄，那么你的内容将无法横向完整展开。浏览器会生成一个横向滚动条，用户必须左右移动整个页面才能看到所有内容。
由于视口太宽而出现右侧截断的网站。2000 年代初期的 Yahoo 网站在浏览器中的体验比该网站的 800 像素宽设计更窄。
下面是一个固定宽度 640 的设计。
See the Pen LearnDesign: Introduction "Fixed-width layout" by web.dev (@web-dot-dev) on CodePen.
简单说，在固定宽度阶段，网页的宽度和浏览器视口的宽度趋于一致。当时屏幕宽度很单一，按照固定宽度适配网站是很“高效”的一种选择。
但是随着屏幕尺寸类型不断增加，固定宽度的适配方案会遇到无法充分利用视口空间、或者无法横向完全展示的问题。
基于这些问题，提出了流体布局的适配方法
流体布局
虽然大多数的设计师趋向使用固定宽度的布局，但有些人选择让他们的布局灵活。
流体布局使用列宽的百分比替代原有的固定宽度策略制作灵活布局。这个设计可以适配更多的尺寸。
不过虽然流体布局在很宽的宽度范围内显示效果都很好，但在极端情况下，显示效果将开始恶化。宽屏幕上布局看起来很拉伸，窄屏幕上布局将被压扁，这两种情况都不是很理想。
维基百科从 2000 年代中期使用流动布局。
下面是在狭窄窗口中看到的流动布局效果：
这个是在宽浏览器窗口中体验到的这样。
可以使用 min-width 和 max-width 缓解上述问题。但是，在小于最小宽度或超过最大宽度上的任何尺寸下，都会遇到固定宽度布局相同的问题。在宽屏幕上会浪费未使用的空间。在狭窄的屏幕上，用户必须左右移动整个页面才能看到所有内容。
See the Pen LearnDesign: Introduction "Liquid layout" by web.dev (@web-dot-dev) on CodePen.
流体布局有时也被称为流式布局或灵活布局。
小屏幕适配
迈进 21 世纪，网络规模不断增大，显示器的尺寸类型也在增多。逐渐出现了一些比任何桌面设备尺寸还要小的屏幕。
随着带有完备功能浏览器的手机出现，设计师面临着两难的境地：如何能确保他们的设计在台式电脑和手机上看起来都很和谐？他们需要一种为小到 240 和大到数千像素宽的屏幕设置内容样式的方法。
为移动端设备创建单独的站点
一种选择是为移动设备创建单独的网站。但是你必须维护两个独立的代码库和设计。为了保证用户在移动设备上访问专为小屏幕优化的网站，需要进行浏览器检测，这可能不可靠，并且这种检测方式很容易被欺骗。此外，移动端浏览器和非移动端之间没有明确的界限。你将平板电脑设备发送到哪个站点？
自适应布局
你可以拥有一个具有两个或三个固定宽度布局的站点，而不是在不同的子域上拥有单独的站点。
当媒体查询首次出现在 CSS 中时，他们打开的创建更灵活布局的大门。但当时许多开发人员依然最喜欢制作固定宽度的布局。一种技术涉及在指定宽度的几个固定宽度布局之间切换。有人称这种技术为自适应设计。
自适应设计允许设计师提供在几种不同尺寸下看起来不错的布局，但在这些尺寸之间查看时，设计看起来并不完全正确。多余空间的问题仍然存在，尽管没有固定宽度布局那么糟糕。
使用 CSS 媒体查询，你可以提供最接近浏览器宽度的布局。但考虑到设备尺寸的多样性，对于大多数人来说，布局可能看起来并不完美。
打开自适应布局示例 ，查看更改窗口大小如何导致设计在布局之间跳转。
See the Pen LearnDesign: Introduction "Adaptive layout" by web.dev (@web-dot-dev) on CodePen.
响应式网页设计
如果说自适应布局是媒体查询和固定宽度布局的混搭，那么响应式网页设计就是媒体查询和流式布局的混搭。
打开响应式设计示例 ，查看更改窗口大小如何导致设计流畅地更改布局。
See the Pen LearnDesign: Introduction "Responsive design" by web.dev (@web-dot-dev) on CodePen.
响应式设计的术语是由 Ethan Marcotte 在 A List Apart 的一篇文章中提出的，主要包含三个标准：
- 流体网格 Fluid grids（类似 bootstrap 的响应式网格，著名的 12 列）
- 流体媒体 Fluid media（这里理解为可以根据外部环境应用不同的资源，如
标签） - 媒体查询 Media queries
响应式网站的布局和图像在任何设备上看起来都很好。但是有一个问题：
手机上的浏览器必须处理为更宽屏幕设计的固定宽度的网站。默认情况下，移动浏览器假定 980 是人们设计的宽度（设计者没有错）。因此，即使你使用了流式布局，浏览器也会应用 980 宽度，然后将渲染的网页缩小到屏幕的实际宽度。
如果你使用响应式设计，你需要告诉浏览器不要进行缩放。使用下面的配置：
viewport 下有两个值，用逗号分隔。第一个是 width=device-width，这告诉浏览器假设网站的宽度与设备的宽度相同（而不是假设宽度是 980）。第二个是 initial-scale=1。这告诉浏览器缩放的倍数。使用响应式设计，不希望浏览器进行任何缩放。
与右侧的布局相比，左侧的手机显示了在元标记到位之前布局的外观。
随着 meta 元素的配置，网页已经准备好响应。
现代的响应式设计
今天，我们可以有更强大的武器来创建更具有响应式的网站，而不仅仅局限于修改 viewport size。
- 媒体查询 Media Queries 使开发人员可以探测到用户偏好，并实现定制体验。
- 容器查询 Container queries 使组件能够拥有自己的响应信息。
响应式设计是一个令人兴奋、包含无限可能的世界。在后续的课程中，我们将介绍这些技术，以及如何使用他们为每个人创建美观、响应迅速的网站。