帶有媒體查詢的響應式網頁設計

第 6 講：帶有媒體查詢的響應式網頁設計

在本次講座中，我們將深入探討響應式網頁設計，這是創建在從桌上型電腦到智慧型手機的所有裝置上看起來都很棒的網站的關鍵技能。響應式設計的關鍵是使用媒體查詢，它允許您根據螢幕尺寸或裝置特性應用不同的樣式。

---

了解響應式網頁設計

響應式網頁設計可確保您的網站適應各種螢幕尺寸，為使用者提供最佳的觀看體驗，無論他們使用什麼裝置。這種方法無需單獨的行動和桌面網站，從而簡化了您的設計流程。

1.為什麼響應式設計很重要

• 使用者體驗：確保您的內容在任何裝置上可存取且易於導航，從而增強可用性。
• SEO： Google 和其他搜尋引擎在搜尋排名中優先考慮適合行動裝置的網站。
• 成本效益： 透過維護跨所有平台運行的單一站點來節省時間和資源。

媒體查詢簡介

媒體查詢是響應式設計的支柱。它們允許您僅在滿足某些條件時應用 CSS 規則，例如當螢幕寬度低於某個閾值時。

1.基本文法

媒體查詢由媒體類型和一個或多個用於檢查條件（例如螢幕寬度）的表達式組成。

• 範例：

  @media screen and (max-width: 768px) {
    body {
      background-color: lightblue;
    }
  }

此媒體查詢將寬度為 768 像素或更小的螢幕上的背景顏色變更為淺藍色。

2.組合媒體查詢

您可以組合多個條件來針對特定場景。

• 範例：

  @media screen and (min-width: 600px) and (max-width: 1200px) {
    .container {
      padding: 20px;
    }
  }

此目標螢幕寬度在 600 像素到 1200 像素之間，將填充應用於 .container 類別。

3.常見斷點

斷點是網站佈局根據螢幕尺寸變化的點。

• 常見斷點：
  • 320px：小型裝置（縱向模式下的智慧型手機）
  • 768px：平板電腦
  • 1024px：橫向模式的小型桌上型電腦或平板電腦
  • 1200px：大型桌面

建立響應式佈局

讓我們建立一個簡單的響應式佈局，根據螢幕尺寸進行調整。

HTML：

<div class="container">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

CSS：

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 10px;
}

header, nav, main, aside, footer {
  padding: 20px;
  background-color: #f4f4f4;
  border: 1px solid #ddd;
}

/* Media Query for Tablets and Smaller Devices */
@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }

  nav, aside {
    display: none; /* Hide navigation and sidebar on smaller screens */
  }
}

在此範例中：

• 佈局使用 CSS 網格在較大的螢幕上建立兩列佈局，側邊欄位於主要內容旁邊。
• 768px 的媒體查詢用於切換到單列佈局，在較小的螢幕上隱藏導航和側邊欄。

響應式影像

除了響應式佈局之外，您還應該確保您的影像在不同裝置上適當縮放。使用 max-width 屬性使圖像響應。

• 範例：

  img {
    max-width: 100%;
    height: auto;
  }

這可確保影像永遠不會超過其容器的寬度並保持其縱橫比。

練習運動

1. 使用 CSS 網格建立具有多列佈局的網頁。
2. 使用媒體查詢調整不同螢幕尺寸的佈局（例如，隱藏元素或更改列號）。
3. 透過套用 max-width 屬性確保頁面上的所有圖像都能回應。

---

下一步：在下一堂課中，我們將探索CSS 轉換和動畫，您將在其中學習如何為您的網站添加動態效果，使其更具互動性和引人入勝。敬請期待！

---

在 LinkedIn 上關注我-

裡多伊‧哈桑

以上是帶有媒體查詢的響應式網頁設計的詳細內容。更多資訊請關注PHP中文網其他相關文章！