宏布局

宏布局描述了界面的更大、网页级组织方式。

两列布局的线框图，旁边是与窄视图的一列相同的布局。

在应用任何布局之前，您应确保内容的流动合理。较小的屏幕将显示这种单列的默认排序方式。

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

覆盖少量屏幕的低层级布局。

再试一次！

覆盖大量屏幕的高级布局。

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

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

正确

再试一次！宏布局是通过媒体查询使用情况来定义的。

False

🎉? 宏布局可以做出调整，以适应内容、填充可用空间等，无需媒体查询。

至此您已经对网页级宏布局有了一些了解，接下来请将注意力转向网页中的组件。这就是微布局的范畴。