宏布局

宏布局用于描述整个界面的整个页面布局，

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

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

<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 和网格都没有特定于宏布局的内容。

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

再试一次！

覆盖大部分屏幕的高级布局。

🎉? 宏布局是页面的基本布局，占据大量视觉区域，通常根据页面大小的媒体查询进行调整。

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

正确

再试一次！宏布局并非由其对媒体查询的使用情况所定义。

错误

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

现在，您已经对网页级宏布局有一些想法，不要将注意力集中在页面内的组件上这是微布局。