CSS 媒體查詢（Media Queries）介紹

CSS 媒體查詢是一種強大的網頁開發技術，允許我們根據不同的設備特性（如螢幕寬度、高度、方向或解析度等）來應用不同的樣式規則。它是響應式網頁設計的基礎，讓網站能夠在各種裝置上呈現最佳的使用體驗。

媒體查詢的基本概念

媒體查詢的核心思想是「條件式樣式」—當特定條件滿足時，相應的 CSS 規則才會被應用。這些條件通常與用戶的設備或瀏覽環境有關。

基本語法如下：

css
@media 媒體類型 and (媒體特性) {
  /* 當條件符合時應用的 CSS 規則 */
}

媒體類型

媒體類型指定了查詢適用的設備類別，常見的有：

• screen：用於電腦螢幕、平板和手機屏幕
• print：用於列印預覽和打印頁面
• all：適用於所有設備類型（預設值）
• speech：用於螢幕閱讀器等語音合成設備

媒體特性

媒體特性描述了設備的具體特徵，例如：

• width、min-width、max-width：視窗寬度
• height、min-height、max-height：視窗高度
• orientation：設備方向（portrait 豎屏或 landscape 橫屏）
• resolution：設備的解析度
• aspect-ratio：視窗的寬高比
• color：設備的色彩位元數

實際應用範例

基本響應式設計例子

css
/* 在桌面端顯示的樣式 */
.container {
  width: 1200px;
  margin: 0 auto;
}

/* 在平板上的樣式 */
@media screen and (max-width: 1024px) {
  .container {
    width: 90%;
  }
}

/* 在手機上的樣式 */
@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }
}

根據設備方向調整佈局

css
/* 橫屏模式的樣式 */
@media screen and (orientation: landscape) {
  .sidebar {
    float: left;
    width: 30%;
  }
  .main-content {
    float: right;
    width: 70%;
  }
}

/* 豎屏模式的樣式 */
@media screen and (orientation: portrait) {
  .sidebar, .main-content {
    width: 100%;
    float: none;
  }
}

針對列印優化的樣式

css
/* 普通屏幕顯示樣式 */
nav, footer, .ads {
  display: block;
}

/* 列印時的樣式 */
@media print {
  nav, footer, .ads {
    display: none; /* 隱藏不需要的元素 */
  }
  body {
    font-size: 12pt; /* 設定適合列印的字體大小 */
    color: black;
  }
  a::after {
    content: " (" attr(href) ")"; /* 顯示連結的 URL */
  }
}

媒體查詢與響應式設計的發展

響應式網頁設計（Responsive Web Design）概念由 Ethan Marcotte 在 2010 年提出，隨著智慧型裝置的普及，媒體查詢變得越來越重要。現在，移動優先（Mobile First）的設計理念更是得到廣泛推崇，即先設計移動端的界面，再逐步擴展到更大的屏幕。

css
/* 移動優先的設計方式 */
.container {
  width: 100%; /* 默認為移動端樣式 */
  padding: 0 15px;
}

/* 平板及以上設備 */
@media screen and (min-width: 768px) {
  .container {
    width: 750px;
    padding: 0;
    margin: 0 auto;
  }
}

/* 桌面設備 */
@media screen and (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

網頁設計中的進階媒體查詢方案

媒體查詢技術在不斷發展，除了基本的螢幕尺寸響應外，現代網頁設計中還有許多進階的媒體查詢方案。這些方案能夠更精確地適應各種使用情境，提供更好的用戶體驗。

容器查詢 (Container Queries)

容器查詢是一項相對較新的技術，它允許元素根據其父容器的大小而不是視窗大小進行樣式調整。這對於可重用的組件特別有用。

css
/* 先定義一個容器 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* 根據容器寬度調整卡片樣式 */
@container card (width < 400px) {
  .card {
    flex-direction: column;
  }
}

@container card (width >= 400px) {
  .card {
    flex-direction: row;
  }
}

容器查詢解決了一個長期存在的問題：相同組件在不同佈局位置可能需要不同的呈現方式。在容器查詢出現之前，這通常需要添加額外的類名或更複雜的媒體查詢組合。

用戶偏好媒體查詢 (User Preference Media Queries)

這些查詢允許網站根據用戶在作業系統或瀏覽器中的偏好設置來調整樣式。

深色模式偏好

css
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212;
    --text-color: #ffffff;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --background-color: #ffffff;
    --text-color: #121212;
  }
}

減少動畫偏好

適用於那些對動畫敏感或有前庭障礙的用戶：

css
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.0001s !important;
    transition-duration: 0.0001s !important;
  }
}

對比度偏好

css
@media (prefers-contrast: high) {
  :root {
    --contrast-color: black;
    --background-color: white;
  }
}

特定裝置功能查詢

觸控能力查詢

css
@media (hover: hover) {
  /* 用戶使用滑鼠等可以懸停的設備 */
  .button:hover {
    background-color: #ff9900;
  }
}

@media (hover: none) {
  /* 觸控設備，不支持懸停 */
  .button {
    padding: 12px 24px; /* 更大的點擊區域 */
  }
}

指針精度查詢

css
@media (pointer: fine) {
  /* 精確指針設備，如滑鼠 */
  .link {
    font-size: 14px;
  }
}

@media (pointer: coarse) {
  /* 粗略指針設備，如觸控螢幕 */
  .link {
    font-size: 16px;
    padding: 8px;
  }
}

視口段 (Viewport Segments)

適用於可折疊裝置，如雙螢幕手機：

css
@media (spanning: single-fold-vertical) {
  /* 針對垂直折疊的雙螢幕設備 */
  .container {
    display: grid;
    grid-template-columns: env(fold-left) 1fr;
  }
}

特徵查詢結合 (Feature Queries)

@supports 可以與媒體查詢結合使用，檢測瀏覽器是否支持特定的 CSS 特性：

css
@media (min-width: 768px) {
  @supports (display: grid) {
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
  }

  @supports not (display: grid) {
    /* 後備方案，為不支援 Grid 的瀏覽器提供 */
    .container {
      display: flex;
      flex-wrap: wrap;
    }
    .item {
      width: 30%;
    }
  }
}

嵌套媒體查詢

CSS 嵌套中的媒體查詢是一個新興的功能，讓代碼組織更加清晰：

css
.card {
  padding: 16px;
   @media (min-width: 768px) {
    padding: 24px;
  }
   .card-title {
    font-size: 18px;
     @media (min-width: 768px) {
      font-size: 24px;
    }
  }
}

邏輯運算符的使用

媒體查詢中可以使用邏輯運算符組合多個條件：

css
/* 使用 and 運算符 */
@media (min-width: 768px) and (orientation: landscape) {
  /* 適用於寬度至少為768px且橫向的設備 */
}

/* 使用 or 運算符（逗號） */
@media (max-width: 600px), (orientation: portrait) {
  /* 適用於寬度最大為600px或豎向的設備 */
}

/* 使用 not 運算符 */
@media not all and (orientation: portrait) {
  /* 適用於非豎向的設備 */
}

/* 新的 or 語法 */
@media (width <= 600px) or (orientation: portrait) {
  /* 使用新的比較運算符和明確的or關鍵字 */
}

響應式設計的策略性方案

內容優先策略

不只關注尺寸，還關注內容的可讀性和可用性：

css
@media (max-width: 30em) {
  /* 窄視口內容調整 */
}

@media (min-width: 30em) and (max-width: 50em) {
  /* 中等視口內容調整 */
}

@media (min-width: 50em) {
  /* 寬視口內容調整 */
}

螢幕比例設計

css
/* 寬屏比例設計 */
@media (min-aspect-ratio: 16/9) {
  .header {
    height: 20vh;
  }
  .content {
    columns: 2;
  }
}

自適應設計方案

結合媒體查詢和 CSS 變量實現更靈活的自適應設計：

css
:root {
  --padding: 1rem;
  --columns: 1;
}

@media (min-width: 600px) {
  :root {
    --padding: 2rem;
    --columns: 2;
  }
}

@media (min-width: 900px) {
  :root {
    --columns: 3;
  }
}

.grid {
  padding: var(--padding);
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
}

新興技術與未來趨勢

範圍媒體查詢

未來的 CSS 可能支援更簡潔的範圍語法：

css
@media (width: 600px to 1000px) {
  /* 適用於寬度在 600px 到 1000px 之間的設備 */
}

環境變量與適應性設計

css
body {
  /* 適應頂部安全區域（如瀏海屏） */
  padding-top: env(safe-area-inset-top);
  /* 適應底部安全區域（如手勢區域） */
  padding-bottom: env(safe-area-inset-bottom);
}

更智能的自適應排版

使用 CSS 變量和 calc() 實現響應式排版：

css
:root {
  --font-size-min: 16;
  --font-size-max: 24;
  --viewport-min: 320;
  --viewport-max: 1200;
 
  /* 計算流體字體大小 */
  --font-size-fluid: calc(
    (var(--font-size-min) * 1px) + 
    (var(--font-size-max) - var(--font-size-min)) * 
    (100vw - (var(--viewport-min) * 1px)) / 
    (var(--viewport-max) - var(--viewport-min))
  );
}

body {
  font-size: var(--font-size-fluid);
}

媒體查詢技術的不斷發展，為網頁設計師提供了更多工具來創建適應不同設備和用戶需求的網站。隨著新設備形態的出現，如可折疊手機、AR/VR 裝置等，媒體查詢的應用場景將會更加多元化，持續推動網頁設計的進步與創新。