介紹：

隨著設備種類和屏幕大小的多樣化，響應式設計已成為現代網站設計的必要部分。今天我們將學習 CSS 的媒體查詢（media queries），並了解如何為不同設備設定不同的樣式，以實現響應式設計。

什麼是媒體查詢？

媒體查詢是 CSS 提供的一種技術，可以根據設備的條件（例如屏幕寬度、高度、解析度等）來應用不同的樣式。這讓我們能夠根據用戶使用的設備自適應顯示。

媒體查詢語法範例：

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

上面的例子中，當視窗寬度小於 768px 時，背景顏色會變為淡藍色。

媒體查詢的基本語法：

媒體查詢的基本格式如下：

@media (條件) {
  /* 此處是根據條件應用的 CSS 樣式 */
}

常見的條件包括：

• max-width: 設置最大寬度（針對小屏幕設備）
• min-width: 設置最小寬度（針對大屏幕設備）
• orientation: 設置屏幕的方向（橫向或縱向）

響應式設計中的斷點（Breakpoints）

斷點是響應式設計中的關鍵概念，代表了樣式應該進行切換的不同屏幕寬度。常見的斷點範例：

• 超大螢幕: 1200px 以上
• 桌面電腦: 992px - 1200px
• 平板電腦: 768px - 992px
• 手機: 480px - 768px

在實際開發中，這些斷點可以根據需求進行調整。

範例：

/* 大螢幕樣式 */
body {
  background-color: white;
}

/* 中等螢幕 (平板) */
@media (max-width: 992px) {
  body {
    background-color: lightgreen;
}

/* 小螢幕 (手機) */
@media (max-width: 768px) {
  body {
    background-color: lightcoral;
}

流體佈局（Fluid Layouts）

在響應式設計中，除了媒體查詢，還可以使用流體佈局，即使用百分比來定義元素的寬度，這樣它們會自動調整大小以適應不同的屏幕寬度。

範例：

.container {
  width: 80%; /* 使用百分比來適應不同螢幕 */
  margin: 0 auto;
}

檢查與調試響應式設計

• 瀏覽器工具: 可以使用瀏覽器的開發者工具（例如 Chrome 開發工具）來模擬不同設備的屏幕大小，並檢查你的樣式是否適應。
• 響應式框架: 像 Bootstrap 這樣的框架內置了很多響應式設計的工具，值得學習。

在設計響應式網站時，遵循以下原則是非常重要的：

1. 流式布局：使用相對單位（如百分比）來設計布局，這樣可以隨著屏幕大小調整元素的大小。

2. 彈性圖片：確保圖片的大小隨著屏幕尺寸變化，可以使用 max-width: 100%; 來達到這一目的。

3. 媒體查詢：根據設備的特徵來改變樣式，以適應不同的顯示需求。