宏布局描述了界面的更大、网页级组织方式。
在应用任何布局之前,您应确保内容的流动合理。 较小的屏幕将显示这种单列的默认排序方式。
<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;
}
}
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。
检查您的掌握程度
测试您对宏布局知识的掌握情况。
以下哪句话最能准确描述宏的布局?
宏布局始终使用媒体查询来适应不同的屏幕尺寸?
至此您已经对网页级宏布局有了一些了解,接下来 请将注意力转向网页中的组件。这就是微布局的范畴。