巨集版面配置是指介面上更大、更豐富的頁面結構。
套用任何版面配置之前 確保內容流暢性 這個單一資料欄的預設順序是較小的螢幕。
<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。
隨堂測驗
測試您對巨集版面配置的瞭解程度。
以下哪一個句子最能描述微距版面配置?
巨集版面配置一律會使用媒體查詢,以適應不同的螢幕大小?
瞭解網頁層級的巨集版面配置後, 並聚焦在網頁中的元件這是 微型版面配置: