宏布局用于描述整个界面的整个页面布局,
在应用任何布局之前 你应该确保内容节奏感合理 这个单列的默认排序方式是针对较小屏幕的显示顺序。
<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。
检查您的理解情况
测试您对宏布局的掌握情况。
以下哪句话最能准确描述宏布局?
宏布局始终使用媒体查询来适应不同的屏幕尺寸?
现在,您已经对网页级宏布局有一些想法, 不要将注意力集中在页面内的组件上这是 微布局。