宏观布局

宏观布局描述了你的界面中页面范围较大的组织结构。

A wireframe of a two column layout, next to the same layout as one column for a narrow view.

在应用任何布局之前，你应该确保你的内容流是合理的。这种单列默认顺序是较小屏幕将获得的。

<body>
  <header>…</header>
  <main>
    <article>…</article>
    <aside>…</aside>
  </main>
  <footer>…</footer>
</body>

当你安排这些单独的页面级组件时，你正在设计一个宏观布局：页面的高级视图。使用媒体查询，你可以在 CSS 中提供规则，描述此视图应如何调整以适应不同的屏幕尺寸。

Grid

CSS Grid 是一个用于将布局应用于你的页面的优秀工具。在上面的示例中，假设你想要在屏幕宽度足够时使用两列布局。要在浏览器足够宽时应用此两列布局，请使用媒体查询来定义指定断点以上的 Grid 样式。

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Flexbox

对于这种特定布局，你也可以使用 Flexbox。样式如下所示

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }

  main article {
    flex: 2;
  }

  main aside {
    flex: 1;
  }
}

但是，Flexbox 版本需要更多 CSS。每列都有一个单独的规则来描述它应该占用多少空间。在 Grid 示例中，相同的信息被封装在一个容器元素的规则中。

你需要媒体查询吗？

你可能并不总是需要使用媒体查询。当你对少量元素应用更改时，媒体查询效果很好，但如果布局需要经常更新，你的媒体查询可能会因包含大量断点而变得难以管理。

假设你有一个页面充满了卡片组件。这些卡片永远不会超过 15em 宽，并且你希望在一行中尽可能多地放置卡片。你可以编写断点为 30em、45em、60em 等的媒体查询，但这非常繁琐且难以维护。

相反，你可以应用规则，使卡片本身自动占据合适的空间。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  grid-gap: 1em;
}

你可以使用 Flexbox 实现类似的布局。在这种情况下，如果卡片不足以填充最后一行，则剩余的卡片将拉伸以填充可用空间，而不是排成列。如果你想对齐行和列，请使用 Grid。

.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
}
.cards .card {
  flex-basis: 15em;
  flex-grow: 1;
}

通过在 Flexbox 或 Grid 中应用一些智能规则，可以设计出动态宏观布局，且只需最少的 CSS 且无需任何媒体查询。这减少了你的工作量——你让浏览器来完成计算。要查看一些无需媒体查询的现代 CSS 流式布局示例，请参阅 1linelayouts.com。

检查你的理解

测试你对宏观布局的了解。

哪个句子最能描述宏观布局？

包含其他布局的布局。
再试一次！大多数布局都包含其他布局。
当设计使用 Flexbox 或 Grid 时。
再试一次！Flexbox 或 Grid 都与宏观布局没有任何特定关系。
覆盖屏幕小区域的低级布局。
再试一次！
覆盖屏幕大区域的高级布局。
🎉 宏观布局是页面的基础布局，跨越大量的视觉区域，并且通常使用页面尺寸媒体查询进行调整。

宏观布局总是使用媒体查询来适应不同的屏幕尺寸吗？

是
再试一次！宏观布局不是由其媒体查询的使用情况定义的。
否
🎉 宏观布局可以适应内容、填充可用空间等等，而无需媒体查询。

现在你已经对页面级宏观布局有了一些想法，请将注意力转向页面内的组件。这是微观布局的领域。