提到版面配置時,我們通常會將網頁層級的設計納入考量。 不過,網頁中較小的元件可以有專屬的獨立版面配置。
在理想情況下,這些元件層級的版面配置會自動調整 無論廣告在頁面上的位置高低 在某些情況下,您可能不知道特定元件會放在主要內容欄和/或側欄中。 如果不知道元件最終會在哪裡 重要的是,確保元件可以根據容器自行調整。
格線
CSS 格線不僅適用於網頁層級版面配置, 此外,這對於其所含元件也有不錯的效果。
在此範例中,::before
和 ::after
虛擬元素會在
標題右側。標題本身是格線容器。要求者
元素,確保線條始終填滿可用空間。
h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1em;
}
h1::before,
h1::after {
content: "";
border-top: 0.1em double black;
align-self: center;
}
![Firefox 的開發人員工具顯示格線重疊畫面。](https://web.dev/static/learn/design/micro-layouts/image/developer-tools-firefox-41cc2b52eb644.png?authuser=4&hl=zh-tw)
![Chrome 的開發人員工具顯示格線重疊畫面。](https://web.dev/static/learn/design/micro-layouts/image/developer-tools-chrome-s-295e54e7843c5.png?authuser=4&hl=zh-tw)
瞭解如何在 Chrome 開發人員工具中檢查格線版面配置。
Flexbox
顧名思義,您可以使用 flexbox 將 元件。您可以宣告元件中應使用哪些元素 設有最小或最大尺寸,且讓其他元素 。
在這個範例中,圖片佔用的可用空間為四分之一,而且 則會佔用其他四分之三文字 但圖片絕對不會超過 200 像素。
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
![Firefox 的開發人員工具顯示 Flexbox 疊加畫面。](https://web.dev/static/learn/design/micro-layouts/image/developer-tools-firefox-4f0d749fd4328.png?authuser=4&hl=zh-tw)
![Chrome 的開發人員工具顯示 Flexbox 疊加畫面。](https://web.dev/static/learn/design/micro-layouts/image/developer-tools-chrome-s-49b481f837205.png?authuser=4&hl=zh-tw)
瞭解如何檢查 Flexbox 版面配置 。
容器查詢
Flexbox 可讓您直接設計內容。您可以指定 元素 (寬度和寬度) 等 就會計算最終導入作業
但對元件本身並不知道其上下文。 無法判斷主要內容是用在主要內容或側欄中。 這可能會導致元件版面配置比頁面版面配置小。 如要套用與內容相關的樣式,您的元件必須瞭解其所在可視區域的大小。
使用頁面版面配置時,您「確實」會知道容器的寬度,因為 是瀏覽器可視區域「媒體查詢」會根據 網頁層級容器
如要回報任何容器的維度,請使用 容器查詢。
首先,請定義哪些元素做為容器。
main,
aside {
container-type: inline-size;
}
也就是說,當您查詢內嵌維度時,英語 文件,即為水平軸。您將根據 容器的寬度
如果元件位於其中一個容器中,您也可以用類似方式套用樣式 如何套用媒體查詢
.media-illustration {
max-width: 200px;
margin: auto;
}
@container (min-width: 25em) {
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
}
.media-content {
flex: 3;
}
}
如果媒體物件位於比 25em
較小的容器內,Flexbox
不會套用樣式圖片和文字為垂直順序排列。
但是,如果包含的元素大於 25em
,圖片和文字就會顯示
並排顯示。
您可以使用容器查詢個別設定元件的樣式。您可以寫 規則;將展開的 現在圖像檢視區變得更加重要了
合併查詢
您可以針對網頁版面配置使用媒體查詢,也可以對 所有元件
這個網頁的整體結構會包含 main
元素和 aside
元素。
這兩個元素都有媒體物件。
<body>
<main>
<div class="media">…</div>
<div class="media">…</div>
</main>
<aside>
<div class="media">…</div>
</aside>
</body>
媒體查詢會在 main
和 aside
元素出現
可視區域的寬度大於 45em
。
@media (min-width: 45em) {
body {
display: grid;
grid-template-columns: 3fr 1fr;
}
}
媒體物件的容器查詢規則將維持不變:
只有在包含的元素大於 25em
時,才會套用水平 Flexbox 版面配置。
容器查詢可大幅改變微版面配置的局面。 元件可以是獨立性質,與瀏覽器可視區域無關。
隨堂測驗
測試您對微版面配置的瞭解程度。
格線和 Flexbox 適用於微型版面配置?
您先前已瞭解過網頁層級的巨集版面配置。現在您已瞭解 元件層級的微型版面配置
接下來,我們會進一步探討內容構成要素 如何製作回應式圖片首先您會瞭解 回應式字體排版。