巨集版面配置是用來描述介面的較大頁面架構。
套用任何版面配置之前,您應確保內容的流動有意義。這個單一資料欄的預設順序是小螢幕取得的結果。
<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。
隨堂測驗
測驗您對巨集版面配置的相關知識。
下列關於巨集版面配置的敘述,何者最貼切?
巨集版面配置一律會使用媒體查詢來適應不同螢幕大小嗎?
現在您對網頁層級巨集版面配置有一些概念了 現在開始注意網頁上的元件這是微型版面配置的運作範圍。