在本单元中，你将学习并运用响应式网页设计的相关实践。
本单元的目标是掌握响应式网页设计技巧。你将学习如何创建适配各种设备的网站，并使用不同的布局和定位方式。
完成本单元后，你将能够：
- 理解响应式网页设计的概念
- 使用 CSS Grid 和 Flexbox 进行布局、定位与响应式设计
- 使用媒体查询（Media Queries）
grid
网格是由交叉的水平线和垂直线组成的。举个例子，当你查看一张城市地图时，会注意到街道相互交叉，形成了清晰的城市布局结构。这是因为许多城市在设计和建造时采用了网格系统。
作为设计师，网格系统可以帮助你组织设计内容，并提供一系列指导方针，使页面上的元素能够正确对齐。使用这种视觉布局系统可以轻松确定元素之间所需的间距，同时创建出引导用户浏览网页的内容结构。
网格还可以提升设计的一致性，让你在设计中重复使用相同的模式。通过这种重复使用的方式，网站的学习成本可以大大降低，让用户能够清晰地浏览并理解网站内容。
接下来，我们将一起探索网格系统的不同组成部分，并讨论它是如何通过提升一致性、对齐方式和间距来增强你的网页设计的。
网格类型
在各种视觉设计中存在多种类型的网格。随着印刷术的发明，制书人发展出了一种手稿式网格，也叫做块状网格，用于为页面上的文本带来结构。而在新闻设计中，栏状网格让出版商能够将页面分割成不同的区域，从而突出展示不同的内容。
与新闻设计类似，网页设计中最常见的网格类型就是栏状网格（column grid）。栏状网格将页面按垂直方向划分成若干个单元，这些单元贯穿整个内容的宽度。这种网格结构可以精确且优雅地决定网页元素的布局方式。
接下来，让我们继续探索网格的构成及其包含的部分。
网格结构
在设计网站时，网格主要由三个组成部分构成：列（columns） 、槽（gutters） 和 边距（margins） 。
列 是指页面宽度中垂直划分的区域。在网页设计中，常见的布局会包含 12 列或 16 列，也有一些只使用 3 列。具体使用多少列取决于你的设计需求、目标设备和屏幕的显示尺寸。
接下来是 槽（gutter） ，也就是每一列之间的空白区域。槽的作用是确保列之间不会紧贴在一起，否则会失去使用网格系统的意义。
边距（margin） 出现在网格系统的最左侧和最右侧，它们确保网页内容不会紧贴在浏览器窗口的边缘。
需要注意的是，边距的大小可能会根据网格的总宽度、浏览器窗口的尺寸或设备的不同而变化。在大屏幕上，边距可能会非常显眼；而在小屏幕上，边距的宽度可能会和槽宽相同。
网格中的列
列是贯穿页面宽度的垂直容器。它们可以彼此关联，用于组织相关内容，比如一段文字的延续；也可以彼此独立，用于布局不相关的内容，比如一个侧边栏。这样的设置为信息的组织提供了极大的灵活性。
在一个网格中，内容是可以跨越多个列的。这意味着网站不必在所有区域都保持相同的列布局。例如，在一个使用 12 列网格的网站中，有些内容可以每次跨越 4 列，重复三次来展示。
作为设计师，你可以选择在整站中保持这种布局不变，或者使用不同的布局方式，比如让内容占据整个网格宽度、占据一半，或者只占据很小的一部分。
我们将在接下来的练习中更详细地介绍这个话题，但现在需要知道的是：列之间是通过“槽（gutters）”隔开的。这个术语指的是列与列之间的间隙。在设计中，内容不应该延伸到槽内，除非它也延伸到了下一列中。
列还可以用于“推动”或“偏移”内容。比如你想在一个 12 列网格中，只在页面右侧的 4 列中显示内容，你可以将内容偏移 8 列，这样内容就被“推”到了最右侧的 4 列中。
网格中的行
行 是网格中的水平线。你可以将行想象成一组按照高度划分的“看不见的盒子”，用来将内容归为一组。在网页设计中，行常用于将内容进行分组，或对内容重新排序，以便创造出更多的留白空间。
举个例子，假设你有一组元素，它们都占用了相同数量的列，并希望它们在页面上整齐对齐，不被其他元素干扰。实现这个效果的一种方法是将这些内容包裹在一个“行（row）”组件中。这样，任何不在这个行组件中的内容都会被“推开”，不影响当前布局。
再强调一点：行可以用于将内容从未被使用的列区域中“推出”或隔开。这是什么意思呢？我们来详细解释一下。
假设我们使用的是一个 12 列的网格，现在有一个元素需要占据其中的 7 列，那么还剩下 5 列空间，在该元素的左侧或右侧。默认情况下，如果你往页面中添加新的内容，它会试图填充这 5 列的空位。然而，如果我们把这个占据 7 列的组件包裹在一个“行”元素中，就可以强制新的内容从下一行开始展示，保留上面未使用的 5 列空位。
这样可以更好地控制布局，避免内容错乱或重叠。
网格中的槽（Gutters）
槽 是列与列之间的空白区域。这个设计元素能够在横向排列的元素之间提供自然的分隔，同时也有助于在纵向上分隔内容行。
需要注意的是，槽的数量总是比列的数量少一个。例如，如果你使用的是一个 12 列的网格，那么只会有 11 个槽——每个相邻列之间各有一个槽。
虽然槽的宽度没有统一标准，但最佳实践是选择一种既能清晰分隔列、又比列本身明显窄的尺寸。这个原则同样适用于纵向的槽。
另外，横向槽和纵向槽的宽度不需要一致。这是因为在页面布局中，你可能希望垂直方向上的间距大于水平方向，以更好地分隔元素。
请记住：如果槽的间距太小，用户很难分辨一个元素从哪里结束，另一个从哪里开始；而如果槽太宽，整个设计看起来会支离破碎，缺乏连贯性。
响应式网格
在设计网页内容时，设计师需要考虑用户可能使用的不同屏幕尺寸，以及这些尺寸如何影响网站的布局。很多网站都采用了响应式设计，这是一组使网站内容能够根据设备或屏幕尺寸进行自适应变化的技术。由于布局会随着屏幕大小发生改变，因此响应式设计通常会根据不同的屏幕尺寸调整总列数，以适应内容，避免内容被压缩变形。
想象一下你的手机、平板和电脑，这些设备的可视区域差别很大。因此，在网页设计中，创建响应式网格布局已经成为一种常见做法。例如，在大屏幕或桌面设备上，你可能使用一个 12 列的网格；而在小屏幕或移动设备上，则会将其调整为 4 列的网格。
作为设计师，响应式网格设计可以帮助你最大化屏幕上的内容展示，确保用户获得更好的访问体验。同时，你的设计元素也会拥有足够的空间进行排布，内容可以更自然地在页面上流动。
whitespace
在网页设计中，空间是打造平衡、和谐布局的重要因素。作为设计师，理解空间的作用非常关键，因为它既能提升设计，也可能破坏设计。
空白（Whitespace） ，又称为负空间，指的是元素之间的留白区域，无论是列之间的槽（gutter），还是文字块周围的额外填充（padding）。作为设计师，不要害怕使用空间来增强网站的可用性，并突出内容的优先级。
我们来看一些优秀空白使用的例子。如果你查看工作区中的示例，会发现左边那个网站的首页很好地运用了空白。它让用户的注意力完全集中在主要操作上——即搜索内容。在这个例子中，空白本身的颜色也是白色。但请注意，空白并不一定是白色的。
再看右边的例子，你会发现空白过多也可能影响网站的使用流畅性。如果元素之间的间距太大，用户在浏览内容时可能会感到割裂和不连贯，进而影响整体体验。
空白又可分为被动空白和主动空白，我们将在接下来的两个练习中进一步探讨这两种类型！
被动空白
我们要讨论的第一种空白是被动空白，也称为微空白（micro whitespace） 。它通常用于提升布局的美感，但并不会引导用户按照特定的阅读顺序或内容流程。因此，被动空白有时也被称为“无意识的空间”。
被动空白最常出现在文本元素中。
不同的字体（font family）之间，其默认的被动空白量也有所不同。你可以通过调整 CSS 属性，如 line-height（行高）或 margin（外边距）来控制它们，从而改善排版的可读性和视觉平衡。
例如：
- 适当调整文本之间的行距，可以让网页更易读、更整洁。
- 如果文本排得太紧密，或者标题与段落之间没有足够的间距，用户阅读时会感到吃力。
- 相反，如果文字之间的空白太大，也会打断阅读节奏，使用户难以集中注意力。
所以，在“过于紧凑”和“过于稀疏”之间找到一个合适的平衡点，是设计师需要完成的重要任务。
主动空白
与更自然形成的被动空白不同，主动空白是有意为之的。也被称为宏空白（macro whitespace） ，主动空白是通过留白来强化页面整体结构，从而突出内容或引导用户从一个区域阅读到另一个区域。
在网站设计中加入主动空白，可以让不同的内容区域适当地分散开来。这种做法能更有效地引导用户浏览页面内容，帮助他们更轻松地理解和吸收信息。
主动空白的形式有很多，但最常见的方式是在页面元素之间添加空间。
例如：在文章的侧边栏与正文之间添加留白，可以清晰地将两者在视觉上分离开来。
此外，这种空白还能让读者快速判断哪些是主要内容，哪些只是辅助信息，从而提升阅读体验和页面的可用性。
