媒體查詢（Media Queries）

媒體查詢

媒體查詢（Media Queries） 是 CSS3 中引入的一種功能，允許開發者根據不同設備的特性（如螢幕大小、解析度、方向等）來定義不同的樣式。通過媒體查詢，我們可以為各種設備提供針對性的樣式，從而實現響應式網頁設計（Responsive Web Design）。

1. 媒體查詢的基本語法

媒體查詢的語法通常使用 @media 規則，結合媒體類型（如 screen、print）和媒體特性（如 max-width、min-width）來編寫。

基本語法：

@media [媒體類型] and (媒體特性) {
    /* CSS 規則 */
}

範例：

/* 為螢幕寬度小於等於 768px 的設備設置樣式 */
@media screen and (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

2. 常見的媒體類型

• all：適用於所有設備（默認）。
• print：適用於打印機和打印預覽模式。
• screen：適用於電腦螢幕、平板、手機等屏幕設備。
• speech：適用於屏幕閱讀器。

3. 常用的媒體特性

媒體特性用來指定媒體查詢的條件，以下是一些常用的媒體特性：

• width 和 height：設備視口的寬度和高度。
  • min-width：最小寬度。
  • max-width：最大寬度。
  • min-height：最小高度。
  • max-height：最大高度。
• aspect-ratio：設備視口的寬高比。
  • min-aspect-ratio：最小寬高比。
  • max-aspect-ratio：最大寬高比。
• orientation：設備方向。
  • portrait：縱向模式（設備高度大於寬度）。
  • landscape：橫向模式（設備寬度大於高度）。
• resolution：設備屏幕的解析度。
  • min-resolution：最低解析度。
  • max-resolution：最高解析度。
  • 可以使用 dpi（每英寸點數）或 dppx（每像素密度）作為單位，例如：min-resolution: 300dpi;
• hover 和 pointer：檢測設備的輸入方式。
  • hover: 是否支持懸停。
    • hover: none（不支持懸停，如觸控屏幕）；
    • hover: hover（支持懸停，如鼠標）。
  • pointer: 指針精度。
    • pointer: none（無指針，如觸控屏幕）；
    • pointer: coarse（粗略指針，如手指觸摸）；
    • pointer: fine（精細指針，如鼠標）。

4. 組合媒體查詢

可以使用邏輯運算符來組合多個媒體查詢條件，以適應更加複雜的場景需求：

• and：同時滿足多個條件。

  /* 當螢幕寬度在 600px 到 1200px 之間時應用 */
  @media screen and (min-width: 600px) and (max-width: 1200px) {
      .container {
          padding: 20px;
      }
  }
  

• ,（逗號，相當於 OR）：滿足任意一個條件。

  /* 當螢幕寬度小於 600px 或方向為橫向時應用 */
  @media (max-width: 600px), (orientation: landscape) {
      .container {
          padding: 10px;
      }
  }
  

• not：排除某個條件。

  /* 排除螢幕類型的設備 */
  @media not screen {
      .print-only {
          display: none;
      }
  }
  

5. 響應式設計中的應用實例

響應式設計需要根據不同設備的特性調整佈局和樣式。以下是一些常見的實踐：

5.1 調整字體大小

為不同的設備設置不同的字體大小，以提高閱讀性。

body {
    font-size: 16px; /* 預設字體大小 */
}

@media screen and (max-width: 768px) {
    body {
        font-size: 14px; /* 為小螢幕設置較小的字體 */
    }
}

5.2 改變佈局

根據螢幕寬度改變佈局結構。

.container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 桌面設備佈局為兩列 */
}

@media screen and (max-width: 768px) {
    .container {
        grid-template-columns: 1fr; /* 手機佈局改為一列 */
    }
}

5.3 圖片的自適應

根據不同的設備顯示不同尺寸的圖片，以優化性能和用戶體驗。

.responsive-img {
    width: 100%;
    height: auto;
}

@media screen and (min-width: 1200px) {
    .responsive-img {
        width: 50%; /* 大螢幕下的圖片寬度 */
    }
}

6. 媒體查詢的最佳實踐

• 使用移動優先設計（Mobile-First Design）：先為移動設備設計樣式，然後使用媒體查詢來增強桌面設備的樣式。
• 避免過多的斷點：選擇幾個常見的設備寬度（如 320px、768px、1024px 等）來進行媒體查詢，避免設置過多的斷點。
• 利用響應式單位：使用百分比（%）、相對單位（如 em、rem）、vw 和 vh 等響應式單位代替固定的像素值，以適應不同的屏幕尺寸。
• 使用 min-width 而不是 max-width：通常建議使用 min-width 作為媒體查詢條件，這樣可以讓樣式更具可擴展性。

7. 實踐範例：響應式網頁設計

HTML:

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

CSS:

/* 基礎樣式 */
body {
    font-family: Arial, sans-serif;
}

.header, .footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
}

.container {
    display: flex;
    flex-direction: row; /* 桌面設計：橫向佈局 */
}

/* 響應式樣式 */
@media screen and (max-width: 768px) {
    .container {
        flex-direction: column; /* 手機設計：縱向佈局 */
    }
    .header, .footer {
        font-size: 14px; /* 手機字體較小 */
    }
}

8. 小結

媒體查詢是響應式網頁設計的核心技術，能夠根據設備特性調整樣式，使網頁在不同設備上都能保持良好的顯示效果。通過靈活運用媒體查詢，結合移動優先設計原則，可以創建出更加兼容和友好的響應式網頁。