媒體查詢（Media Queries）是響應式設計的核心工具，它允許開發者?根據設備特性（如屏幕寬度、分辨率、方向等）動態調整 CSS 樣式?，從而實現同一套代碼適配不同設備的顯示效果。以下是媒體查詢在響應式設計中的關鍵作用和實現細節：

一、媒體查詢的核心作用

1. ?動態布局適配?
   根據屏幕寬度調整容器尺寸、元素排列方式（如從單列變為多列）。
2. ?內容優化?
   隱藏次要內容（如大屏展示完整導航，小屏折疊為漢堡菜單）。
3. ?交互優化?
   調整按鈕大小、間距，確保觸控設備友好性。
4. ?資源適配?
   根據分辨率加載高清圖或低清圖，提升性能。

二、基本語法與參數

1. 基本語法

cssCopy Code
@media [媒體類型] and (條件) {
  /* 符合條件時應用的 CSS 規則 */
}

2. 常用參數

三、典型應用場景

1. 斷點布局調整（Breakpoints）

根據屏幕寬度切換布局結構：

cssCopy Code
/* 默認移動端樣式（單列） */
.container { width: 100%; }

/* 平板及以上（雙列） */
@media (min-width: 768px) {
  .container { 
    width: 90%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* 桌面端（三列） */
@media (min-width: 1024px) {
  .container { grid-template-columns: repeat(3, 1fr); }
}

2. 內容顯隱控制

在小屏隱藏次要內容：

cssCopy Code
.sidebar { display: none; }

@media (min-width: 768px) {
  .sidebar { display: block; } /* 大屏顯示側邊欄 */
}

3. 字體與間距優化

根據屏幕尺寸調整字體大小和行高：

cssCopy Code
body { font-size: 16px; }

@media (min-width: 768px) {
  body { font-size: 18px; } /* 大屏增大字體 */
}

4. 高分辨率屏幕適配

為 Retina 屏提供高清圖：

cssCopy Code
.logo {
  background-image: url("logo.png");
}

@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) {
  .logo {
    background-image: url("logo@2x.png"); /* 2倍圖 */
  }
}

四、較佳實踐

1. ?移動優先（Mobile-First）?

先編寫默認（小屏）樣式，再通過 min-width 逐步增強大屏樣式：

cssCopy Code
/* 默認樣式（移動端） */
.nav { padding: 10px; }

/* 大屏增強 */
@media (min-width: 768px) {
  .nav { padding: 20px; }
}

2. ?基于內容而非設備設置斷點?

根據內容布局自然斷裂點設置斷點，而非固定設備尺寸（如 768px 是內容從單列變雙列的分界點）。

3. ?避免過度分段?

優先通過流式布局（百分比、Flex/Grid）減少媒體查詢使用次數，僅在布局結構變化時引入斷點。

4. ?邏輯分組?

將同一模塊的媒體查詢集中管理，而非分散在代碼各處：

cssCopy Code
.card {
  width: 100%;
}

@media (min-width: 768px) {
  .card { width: 50%; }
}

@media (min-width: 1024px) {
  .card { width: 33.33%; }
}

五、常見問題與解決

六、與其他技術的結合

1. ?Flexbox/Grid 布局?
   媒體查詢定義斷點，Flex/Grid 實現動態排列：

   cssCopy Code
   .container {
     display: flex;
     flex-direction: column; /* 移動端垂直排列 */
   }
   
   @media (min-width: 768px) {
     .container { flex-direction: row; } /* 大屏水平排列 */
   }
   

2. ?CSS 變量?
   通過變量統一管理斷點值，提高可維護性：

   cssCopy Code
   :root {
     --tablet: 768px;
     --desktop: 1024px;
   }
   
   @media (min-width: var(--tablet)) { /* ... */ }
   

總結

媒體查詢是響應式設計的核心工具，通過精準控制不同屏幕下的樣式，實現?布局靈活切換、內容按需展示、交互友好適配?。結合流式布局、彈性盒、網格布局等技術，可構建高效、可維護的跨設備網頁。