微版面配置

提到版面配置時,我們通常會將網頁層級的設計納入考量。 不過,網頁中較小的元件可以有專屬的獨立版面配置。

在理想情況下,這些元件層級的版面配置會自動調整 無論廣告在頁面上的位置高低 在某些情況下,您可能不知道特定元件會放在主要內容欄和/或側欄中。 如果不知道元件最終會在哪裡 重要的是,確保元件可以根據容器自行調整。

雙欄版面配置,一個寬版和一個窄版。視媒體物件位於寬度欄或窄欄而定,其配置方式會有所不同。

格線

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 的開發人員工具顯示格線重疊畫面。 Chrome 的開發人員工具顯示格線重疊畫面。
電腦版瀏覽器 (例如 Firefox 和 Chrome) 提供開發人員工具,可在設計上重疊顯示格線和區域。

瞭解如何在 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 疊加畫面。 Chrome 的開發人員工具顯示 Flexbox 疊加畫面。
Firefox 和 Chrome 的開發人員工具 您的 Flexbox 元件

瞭解如何檢查 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>

媒體查詢會在 mainaside 元素出現 可視區域的寬度大於 45em

@media (min-width: 45em) {
  body
{
   
display: grid;
   
grid-template-columns: 3fr 1fr;
 
}
}

媒體物件的容器查詢規則將維持不變: 只有在包含的元素大於 25em 時,才會套用水平 Flexbox 版面配置。

雙欄版面配置,一個寬版和一個窄版。 
視媒體物件位於寬度欄或窄欄而定,其配置方式會有所不同。

容器查詢可大幅改變微版面配置的局面。 元件可以是獨立性質,與瀏覽器可視區域無關。

隨堂測驗

測試您對微版面配置的瞭解程度。

格線和 Flexbox 適用於微型版面配置?

您先前已瞭解過網頁層級的巨集版面配置。現在您已瞭解 元件層級的微型版面配置

接下來,我們會進一步探討內容構成要素 如何製作回應式圖片首先您會瞭解 回應式字體排版