CSS Media Queries 媒體查詢

Media Queries (媒體查詢) 可以根據裝置的特性（如螢幕寬度、方向等）套用不同的 CSS 樣式，是實現響應式網頁設計的核心技術。

基本語法

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

範例

/* 螢幕寬度小於 768px 時套用 */
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

/* 螢幕寬度大於等於 1024px 時套用 */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
  }
}

媒體類型

/* 只在螢幕上套用 */
@media screen and (max-width: 768px) {
  /* ... */
}

/* 列印時套用 */
@media print {
  .no-print {
    display: none;
  }
}

常用媒體特性

寬度 (width)

/* 精確寬度 */
@media (width: 768px) { }

/* 最小寬度（大於等於） */
@media (min-width: 768px) { }

/* 最大寬度（小於等於） */
@media (max-width: 768px) { }

高度 (height)

@media (min-height: 600px) { }
@media (max-height: 800px) { }

方向 (orientation)

/* 直向（高度大於寬度） */
@media (orientation: portrait) { }

/* 橫向（寬度大於高度） */
@media (orientation: landscape) { }

解析度 (resolution)

/* 高解析度螢幕（Retina） */
@media (min-resolution: 2dppx) { }
@media (-webkit-min-device-pixel-ratio: 2) { }

懸停能力 (hover)

/* 可以懸停的裝置（如滑鼠） */
@media (hover: hover) {
  .button:hover {
    background: blue;
  }
}

/* 無法懸停的裝置（如觸控螢幕） */
@media (hover: none) { }

偏好設定

/* 使用者偏好深色模式 */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #ffffff;
  }
}

/* 使用者偏好減少動態效果 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

邏輯運算子

and

同時滿足多個條件：

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* 768px 到 1024px 之間 */
}

or（逗號）

滿足其中一個條件即可：

@media (max-width: 600px), (orientation: portrait) {
  /* 寬度小於 600px 或直向 */
}

not

否定整個媒體查詢：

@media not print {
  /* 非列印時套用 */
}

only

防止舊瀏覽器套用樣式：

@media only screen and (min-width: 768px) {
  /* 只在支援媒體查詢的瀏覽器上套用 */
}

常用斷點

一般的斷點設計：

/* 手機 */
@media (max-width: 575px) { }

/* 平板（直向） */
@media (min-width: 576px) and (max-width: 767px) { }

/* 平板（橫向）/ 小筆電 */
@media (min-width: 768px) and (max-width: 991px) { }

/* 桌機 */
@media (min-width: 992px) and (max-width: 1199px) { }

/* 大螢幕 */
@media (min-width: 1200px) { }

簡化的斷點

採用行動優先（Mobile First）設計：

/* 基礎樣式（手機） */
.container {
  padding: 16px;
}

/* 平板以上 */
@media (min-width: 768px) {
  .container {
    padding: 24px;
  }
}

/* 桌機以上 */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

實用範例

響應式導航

/* 手機：隱藏導航，顯示漢堡選單 */
.nav-menu {
  display: none;
}

.hamburger {
  display: block;
}

/* 桌機：顯示導航，隱藏漢堡選單 */
@media (min-width: 768px) {
  .nav-menu {
    display: flex;
  }
  
  .hamburger {
    display: none;
  }
}

響應式字體

body {
  font-size: 14px;
}

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

@media (min-width: 1200px) {
  body {
    font-size: 18px;
  }
}

響應式欄位

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 576px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

深色模式

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #f0f0f0;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

在 HTML 中使用

也可以在 <link> 標籤中使用媒體查詢：

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="mobile.css" media="(max-width: 767px)">
<link rel="stylesheet" href="desktop.css" media="(min-width: 768px)">
<link rel="stylesheet" href="print.css" media="print">