宏布局

宏观布局描述的是界面中更大的页面级组织。

两列布局的线框图，与单列布局并排显示，用于窄视图。

在应用任何布局之前，您应确保内容的流程合理。这个单列的默认排序方式是针对较小屏幕的显示顺序。

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

当您排列这些单独的页面级组件时，而您正在设计宏布局：网页的概要视图。使用媒体查询，您可以在 CSS 中提供规则，说明此视图应如何根据不同的屏幕尺寸进行调整。

网格

CSS 网格是一款非常适合将布局应用于网页的工具。在上面的示例中，假设您希望在有足够的屏幕宽度可用时采用双列布局。如需在浏览器足够宽时应用此双列布局，请使用媒体查询在指定断点上方定义网格样式。

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

注意：虽然指定 min-inline-size 而不是 min-width 更有意义，但逻辑属性尚不适用于媒体查询。

Flexbox

对于这种特定的布局，您也可以使用 flexbox。样式如下所示：

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

  main article {
    flex: 2;
  }

  main aside {
    flex: 1;
  }
}

不过，Flexbox 版本需要更多的 CSS。每列都有单独的规则来描述其应占用的空间。在网格示例中，相同的信息封装在包含元素的一条规则中。

您是否需要媒体查询？

您可能并不总是需要使用媒体查询。对少数元素应用更改时，媒体查询可以正常运行但如果布局需要大量更新，您的媒体查询可能会因为大量断点而失控。

假设您有一个页面上满是卡片组件。卡片的宽度绝不超过 15em，并且您希望在一行中放置尽可能多的卡片。您可以编写包含以下断点的媒体查询：30em、45em、60em 等等，但这样做非常繁琐，而且难以维护。

不过，您可以应用规则，让卡片本身自动占用适当的空间。

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

您可以使用 Flexbox 实现类似的布局。在本例中，如果卡片数量不足，无法填充最后一行其余的卡片会拉伸以填充可用空间，而不是成列排列。如果您想对齐行和列，请使用网格。

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

通过在 Flexbox 或网格中应用一些智能规则即使不进行任何媒体查询，也可以用最少的 CSS 设计动态宏布局。这会减少您的工作量，您将让浏览器代替执行计算。如需查看一些无需媒体查询即可流畅自适应的现代 CSS 布局示例，请访问 1linelayouts.com。

检查您的理解情况

测试您对宏布局的掌握情况。

以下哪个句子最能准确描述宏观布局？

包含其他布局的布局。

请重试！大多数布局都包含其他布局。

设计使用 flexbox 或网格时。

再试一次！Flexbox 和网格都没有特定于宏布局的内容。

覆盖一小部分屏幕的低级别布局。

再试一次！

占据屏幕大部分区域的高级布局。

🎉 宏观布局是网页的基础布局，涵盖大量的视觉区域，通常通过页面大小媒体查询进行调整。

宏布局始终使用媒体查询来适应不同的屏幕尺寸？

正确

请重试！宏布局并非由其使用媒体查询的方式定义。

错误

🎉 宏布局可以根据内容调整大小，填充可用空间等，而无需媒体查询。

现在，您已经对网页级宏观布局有了一些想法，接下来我们来看看网页中的组件。这是微布局。