進階篇：格線系統搭配 RWD（響應式網頁設計）

更新日期： 2024 年 11 月 11 日

在現代網頁設計中，響應式佈局（Responsive Web Design, RWD）是確保網站在各種裝置上呈現最佳效果的關鍵。

CSS 格線系統能夠輕鬆與 RWD 結合，通過 @media 設定不同的格線寬度，讓各裝置尺寸下的佈局自動適應。

本文將介紹如何使用 @media 搭配多個 CSS class，在 HTML 元素中使用多個欄位樣式，實現自適應的排版效果。

為什麼選擇格線系統搭配 RWD？

格線系統與 RWD 結合的主要好處在於可以更靈活地控制欄位寬度，依據裝置大小自動調整排版：

• 保持頁面美觀：不同裝置上選單與內容可以自動調整至最佳寬度，避免布局擁擠或過度分散。
• 易於維護與擴展：只需在 CSS 中設置一次不同尺寸的欄位寬度，未來如有新的裝置需求，只需調整媒體查詢。

HTML 結構：多個欄位 Class 的應用

在這個例子中，HTML 元素使用多個欄位 class，例如 col-6 和 col-md-12。這些 class 允許元素在不同裝置下自動調整寬度比例。

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="box"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-6 col-md-12">
      <div class="box"></div>
    </div>
    <div class="col-6">
      <div class="box"></div>
    </div>
  </div>
</div>

說明

• col-6：設定欄位寬度在大尺寸螢幕佔 50%。
• col-md-12：設定欄位寬度在中小尺寸螢幕下佔 100%。
• 當螢幕寬度小於 768px 時，.col-md-12 的樣式會生效，將指定欄位調整為全寬，確保在小裝置上能清晰地顯示內容。

CSS 格線樣式：透過 @media 實現 RWD

使用 @media 設置不同的欄位寬度，使得 .col-md-* 類別在不同裝置下應用不同的寬度。

* {
  margin: 0;
  padding: 0;
}

.container {
    max-width: 1400px;
    padding: 0 10px;
    margin: auto;
    border: 1px solid #000;
}

.row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

[class*="col-"] {
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid olive;
}

.box {
    height: 200px;
    width: 100%;
    background: pink;
}

/* 欄位寬度設置 */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
/* 以下略... */
.col-12 { width: 100%; }

/* 中小尺寸螢幕設置 */
@media (width < 768px) {
    .col-md-1 { width: 8.33%; }
    .col-md-2 { width: 16.66%; }
    /* 以下略... */
    .col-md-12 { width: 100%; }
}

使用 RWD 進行布局的順序與覆蓋原理

在 RWD 佈局中，設定 @media 的寬度門檻順序很重要。

通常，RWD 會按照「先小後大」的順序設置不同裝置的佈局樣式，這樣可以確保樣式根據裝置尺寸依序生效。

例如，以下是推薦的 RWD 佈局順序：

@media (width < 768px) {
    /* 手機樣式 */
}

@media (width >= 768px) {
    /* 平板樣式 */
}

@media (width >= 1024px) {
    /* 桌面樣式 */
}

@media (width >= 1440px) {
    /* 超大螢幕樣式 */
}

原理說明

• 當畫面寬度介於 768px 到 1024px 時，系統會同時滿足小於 1024px 和 768px 以上的條件，但由於 CSS 是按照順序讀取，1024px 的設定將覆蓋 768px 的設定。
• 這意味著若同一元素在 768px 和 1024px 有不同的樣式，則當螢幕寬度大於 768px 時，1024px 的樣式會覆蓋 768px 的樣式。因此，在 CSS 中將更大尺寸的 @media 查詢置於下方即可確保適當的樣式優先順序。

這樣的順序安排可以確保不同的裝置尺寸能夠逐層繪製出正確的佈局，避免樣式錯誤。

這也是實現 RWD 設計的重要概念。

如何靈活應用多個 Class 實現響應式效果

在 HTML 中使用多個 class 可以讓網頁的布局隨裝置大小自動調整。

例如，一個元素可以同時包含 col-6 和 col-md-12。

當寬度大於 768px 時，.col-6 會讓欄位佔 50%；當寬度小於 768px 時，.col-md-12 則會讓欄位佔 100%，確保內容在手機上能佔滿螢幕，易於閱讀。

小結

使用 CSS 格線系統搭配 @media 查詢可以大大提升網頁的響應性。透過設置多個欄位 class，可以靈活地根據裝置調整網頁的佈局，達到 RWD 的最佳效果。

排列 @media 的寬度門檻時，按照「由小到大」的順序設置不同的佈局樣式，以確保樣式適當覆蓋並適應不同螢幕尺寸。

這樣的設計方式不僅提升了使用體驗，還能更有效地利用網頁空間，非常適合現代響應式設計的需求。