媒體查詢基礎

CSS 媒體查詢提供了一種只有當瀏覽器和裝置環境符合你指定的規則時才應用 CSS 的方法，例如“視口寬度大於 480 畫素”。媒體查詢是響應式 Web 設計的關鍵部分，因為它們允許你根據視口大小建立不同的佈局，但它們也可以用來檢測你的網站執行環境的其他資訊，例如使用者使用的是觸控式螢幕而不是滑鼠。

在本課中，你將首先學習媒體查詢中使用的語法，然後透過示例瞭解如何使基本設計具有響應性。

預備知識	使用 HTML 構造內容、CSS 樣式基礎、文字和字型樣式基礎，熟悉CSS 佈局基本概念。
學習成果	媒體查詢的語法。常見的媒體查詢型別。使用 `width` 和 `height` 媒體查詢建立響應式佈局。選擇斷點。使用媒體查詢實現移動優先設計。

媒體查詢基礎知識

最簡單的媒體查詢語法如下所示

css

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

它由以下部分組成

一個媒體型別，告訴瀏覽器此程式碼適用於哪種媒體（列印或螢幕）。
一個媒體表達式，它是一個規則或測試，必須透過才能應用其中包含的 CSS。
一組 CSS 規則，如果測試透過且媒體型別正確，這些規則將被應用。

媒體型別

你可以指定的媒體型別有

all
列印
screen

以下媒體查詢只會在列印頁面時將正文設定為 12pt。當頁面在瀏覽器中載入時，它不會應用。

css

@media print {
  body {
    font-size: 12pt;
  }
}

注意：這裡的媒體型別與所謂的MIME 型別不同。媒體查詢級別 3 規範中定義了許多其他媒體型別；這些已被棄用，應避免使用。媒體型別是可選的；如果你在媒體查詢中未指明媒體型別，則媒體查詢將預設為所有媒體型別。

媒體特性規則

指定型別後，你可以使用規則定位媒體特性。以下示例展示瞭如何使用不同的媒體查詢。要更改螢幕的寬度，請更改瀏覽器大小或旋轉手持裝置。

注意：另外，你可以使用瀏覽器開發者工具的響應式尺寸調整功能（例如 Firefox 響應式設計模式）來模擬不同的裝置寬度。

寬度和高度

我們為了建立響應式設計而最常檢測的特性（並且具有廣泛的瀏覽器支援）是視口寬度，我們可以使用 width 媒體特性，並根據需要新增 min- 或 max- 字首，在視口寬度高於或低於某個特定寬度，或精確寬度時應用 CSS。

這些特性用於建立適應不同螢幕尺寸的佈局。例如，如果視口寬度恰好是 600 畫素，要將正文文字顏色設定為紅色，你將使用以下媒體查詢。

css

@media screen and (width: 600px) {
  body {
    color: red;
  }
}

html

<p>
  One November night in the year 1782, so the story runs, two brothers sat over
  their winter fire in the little French town of Annonay, watching the grey
  smoke-wreaths from the hearth curl up the wide chimney. Their names were
  Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted
  as possessing thoughtful minds and a deep interest in all scientific knowledge
  and new discovery.
</p>

嘗試調整瀏覽器視窗寬度，看看你是否能找到上面演示正好是 600px 寬的“最佳點”，使文字變成紅色。

width（和 height）媒體特性可以用作範圍，因此可以字首 min- 或 max- 來指示給定值是最小值或最大值。例如，如果視口寬度為 600 畫素或更窄，要使顏色變為藍色，請使用 max-width

css

@media screen and (max-width: 600px) {
  body {
    color: blue;
  }
}

<p>
  One November night in the year 1782, so the story runs, two brothers sat over
  their winter fire in the little French town of Annonay, watching the grey
  smoke-wreaths from the hearth curl up the wide chimney. Their names were
  Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted
  as possessing thoughtful minds and a deep interest in all scientific knowledge
  and new discovery.
</p>

嘗試縮小視窗，直到上面的文字變為藍色。

實際上，使用最小值或最大值對於響應式設計更有用，所以你很少會看到 width 或 height 單獨使用。

你可以測試許多其他媒體特性，儘管媒體查詢規範級別 4 和 5 中引入的一些較新特性具有有限的瀏覽器支援。每個特性都在 MDN 上有文件，並附帶瀏覽器支援資訊，你可以在使用媒體查詢：語法中找到完整的列表。

方向

一個支援良好的媒體特性是 orientation，它允許我們測試縱向或橫向。要更改裝置處於橫向時正文文字的顏色，請使用以下媒體查詢。

css

@media (orientation: landscape) {
  body {
    color: rebeccapurple;
  }
}

<p>
  One November night in the year 1782, so the story runs, two brothers sat over
  their winter fire in the little French town of Annonay, watching the grey
  smoke-wreaths from the hearth curl up the wide chimney. Their names were
  Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted
  as possessing thoughtful minds and a deep interest in all scientific knowledge
  and new discovery.
</p>

上面的示例很難在頁面內測試；要檢視其效果，建議你將上面的程式碼複製到本地 HTML 檔案中，並在自己的標籤頁中開啟它。

標準的桌面檢視具有橫向，在這種方向下效果良好的設計在手機或平板電腦的縱向模式下可能效果不佳。測試方向可以幫助你建立針對縱向模式裝置最佳化的佈局。

指向裝置的使用

作為 Level 4 規範的一部分，引入了 hover 媒體特性。此特性意味著你可以測試使用者是否能夠懸停在元素上，這實際上意味著他們正在使用某種指向裝置；觸控式螢幕和鍵盤導航不支援懸停。

css

@media screen and (hover: hover) {
  body:hover {
    color: white;
    background: black;
  }
}

<p>
  One November night in the year 1782, so the story runs, two brothers sat over
  their winter fire in the little French town of Annonay, watching the grey
  smoke-wreaths from the hearth curl up the wide chimney. Their names were
  Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted
  as possessing thoughtful minds and a deep interest in all scientific knowledge
  and new discovery.
</p>

上面的示例在懸停時文字變為白色，背景變為黑色，但僅在支援懸停的裝置上。如果我們知道使用者不能懸停，我們可以預設顯示一些互動功能。對於可以懸停的使用者，我們可以選擇在連結懸停時使其可用。

在 Level 4 中還有 pointer 媒體特性。它有三個可能的值：none、fine 和 coarse。fine 指標類似於滑鼠或觸控板。它使使用者能夠精確地定位小區域。coarse 指標是觸控式螢幕上的手指。值 none 表示使用者沒有指向裝置；也許他們只使用鍵盤或語音命令進行導航。

使用 pointer 可以幫助你設計更好的介面，以響應使用者與螢幕的互動型別。例如，如果你知道使用者正在以觸控式螢幕方式與裝置互動，則可以建立更大的點選區域。

使用範圍語法

一個常見的情況是檢查視口寬度是否在兩個值之間

css

@media (min-width: 30em) and (max-width: 50em) {
  /* … */
}

如果你想提高可讀性，可以使用“範圍”語法

css

@media (30em <= width <= 50em) {
  /* … */
}

因此，在這種情況下，當視口寬度在 30em 和 50em 之間時，樣式將被應用。

更復雜的媒體查詢

對於所有這些不同的媒體查詢，你可能想要組合它們，或者建立查詢列表 — 任何一個都可能匹配。

和以前一樣，嘗試透過調整瀏覽器寬度來測試本節中的示例。

媒體查詢中的“and”邏輯

為了組合媒體特性，你可以使用 and，就像我們上面使用 and 組合媒體型別和特性一樣。例如，我們可能需要測試 width 和 orientation。只有當視口寬度至少為 600 畫素且裝置處於橫向模式時，正文文字才會變為藍色。

css

@media screen and (width >= 600px) and (orientation: landscape) {
  body {
    color: blue;
  }
}

<p>
  One November night in the year 1782, so the story runs, two brothers sat over
  their winter fire in the little French town of Annonay, watching the grey
  smoke-wreaths from the hearth curl up the wide chimney. Their names were
  Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted
  as possessing thoughtful minds and a deep interest in all scientific knowledge
  and new discovery.
</p>

媒體查詢中的“or”邏輯

如果你有一組查詢，其中任何一個都可以匹配，那麼你可以用逗號分隔這些查詢。在下面的示例中，如果視口寬度至少為 600 畫素或者裝置處於橫向，則文字將變為藍色。如果其中任何一個條件為真，則查詢匹配。

css

@media screen and (width >= 600px), screen and (orientation: landscape) {
  body {
    color: blue;
  }
}

<p>
  One November night in the year 1782, so the story runs, two brothers sat over
  their winter fire in the little French town of Annonay, watching the grey
  smoke-wreaths from the hearth curl up the wide chimney. Their names were
  Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted
  as possessing thoughtful minds and a deep interest in all scientific knowledge
  and new discovery.
</p>

媒體查詢中的“not”邏輯

你可以使用 not 運算子來否定整個媒體查詢。這會反轉整個媒體查詢的含義。因此，在下一個示例中，只有當視口寬度不至少為 600 畫素時，文字才會變為藍色。

css

@media not (width >= 600px) {
  body {
    color: blue;
  }
}

<p>
  One November night in the year 1782, so the story runs, two brothers sat over
  their winter fire in the little French town of Annonay, watching the grey
  smoke-wreaths from the hearth curl up the wide chimney. Their names were
  Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted
  as possessing thoughtful minds and a deep interest in all scientific knowledge
  and new discovery.
</p>

你還可以使用 not 來否定特定的表示式。

css

@media (not (width < 600px)) and (not (width > 1000px)) {
  body {
    color: blue;
  }
}

如果視口寬度在 600 到 1000 畫素之間，這將應用樣式。這相當於 (600px <= width <= 1000px)。

如何選擇斷點

在響應式設計的早期，許多設計師會嘗試針對非常具體的螢幕尺寸。流行手機和平板電腦的螢幕尺寸列表被髮布，以便可以建立設計來精確匹配這些視口。

現在裝置種類繁多，尺寸也千差萬別，這使得這種做法不再可行。這意味著，與其為所有設計針對特定尺寸，不如在內容開始出現某種程度的“破裂”時改變設計。也許行長變得過長，或者側邊欄被擠壓得難以閱讀。這就是你需要使用媒體查詢來改變設計，使其更適合可用空間的時候。這種方法意味著無論使用的裝置尺寸確切是多少，都無關緊要；每個範圍都得到了照顧。引入媒體查詢的點稱為斷點。

Firefox DevTools 中的響應式設計模式對於確定這些斷點的位置非常有用。你可以輕鬆地縮小和放大視口，以檢視在何處透過新增媒體查詢和調整設計來改進內容。

A screenshot of a layout in a mobile view in Firefox DevTools.

移動優先的響應式設計

大體上，響應式設計有兩種方法。你可以從桌面或最寬的檢視開始，然後隨著視口變小而新增斷點來移動元素；或者你可以從最小的檢視開始，然後隨著視口變大而添加布局。後一種方法被稱為移動優先響應式設計，通常是最好的方法。

最小裝置的檢視通常是一個簡單的單列內容，就像它出現在正常流中一樣。這意味著你可能不需要為小型裝置做很多佈局——組織好你的原始碼，預設情況下你將獲得一個可讀的佈局。

建立自己的移動優先設計

現在輪到你了；在本教程部分，你將構建自己的基本移動優先響應式設計。在生產站點中，你可能需要在媒體查詢中調整更多內容，但方法將完全相同。

入門

我們的起點是一個 HTML 文件，其中應用了一些 CSS，為佈局的各個部分添加了背景顏色。

首先，將下方程式碼塊中的 HTML 程式碼複製到文字編輯器中，將其儲存為計算機上的 HTML 檔案，然後在瀏覽器中開啟它。

html

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Media Queries: a simple mobile first design, step 1</title>
  <style>
    /* Add styles here */
  </style>
</head>
<div class="wrapper">
  <header>
    <nav>
      <ul>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Meet the team</a></li>
        <li><a href="">Blog</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <div class="content">
        <h1>Veggies!</h1>
        <p>
          Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh
          onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
        </p>

        <p>
          Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot
          courgette tatsoi pea sprouts fava bean collard greens dandelion okra
          wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
        </p>

        <p>
          Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
          kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
          winter purslane kale. Celery potato scallion desert raisin horseradish
          spinach carrot soko. Lotus root water spinach fennel kombu maize
          bamboo shoot green bean swiss chard seakale pumpkin onion chickpea
          gram corn pea. Brussels sprout coriander water chestnut gourd swiss
          chard wakame kohlrabi beetroot carrot watercress. Corn amaranth
          salsify bunya nuts nori azuki bean chickweed potato bell pepper
          artichoke.
        </p>

        <p>
          Nori grape silver beet broccoli kombu beet greens fava bean potato
          quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil
          turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant
          winter purslane fennel azuki bean earthnut pea sierra leone bologi
          leek soko chicory celtuce parsley jícama salsify.
        </p>
      </div>
      <aside class="related">
        <p>
          All these veggies are brought to you by the
          <a href="https://veggieipsum.com/">Veggie Ipsum generator</a>.
        </p>
      </aside>
    </article>
    <aside class="sidebar">
      <h2>External vegetable-based links</h2>
      <ul>
        <li>
          <a
            href="https://www.thekitchn.com/how-to-cook-broccoli-5-ways-167323">
            How to cook broccoli
          </a>
        </li>
        <li>
          <a href="https://www.bbcgoodfood.com/glossary/swiss-chard">
            Swiss Chard
          </a>
        </li>
        <li>
          <a
            href="https://www.bbcgoodfood.com/recipes/collection/christmas-parsnip">
            Christmas Parsnip Recipes
          </a>
        </li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2024</p>
  </footer>
</div>

文件的原始碼以一種使內容可讀的方式進行排序。這是重要的第一步，它確保了即使內容被螢幕閱讀器朗讀，也能被理解。

我們示例的初始樣式如下；將它們複製到你的 HTML 檔案中 <style></style> 標籤內，替換 /* Add styles here */ 註釋。

css

* {
  box-sizing: border-box;
}

body {
  width: 90%;
  margin: 2em auto;
  font:
    1em/1.3 "Helvetica",
    "Arial",
    sans-serif;
}

a:link,
a:visited {
  color: #333333;
}

nav ul,
aside ul {
  list-style: none;
  padding: 0;
}

nav a:link,
nav a:visited {
  background-color: rgb(207 232 220 / 20%);
  border: 2px solid rgb(79 185 227);
  text-decoration: none;
  display: block;
  padding: 10px;
  color: #333333;
  font-weight: bold;
}

nav a:hover {
  background-color: rgb(207 232 220 / 70%);
}

.related {
  background-color: rgb(79 185 227 / 30%);
  border: 1px solid rgb(79 185 227);
  padding: 10px;
}

.sidebar {
  background-color: rgb(207 232 220 / 50%);
  padding: 10px;
}

article {
  margin-bottom: 1em;
}

如果你在開發者工具的響應式設計模式中檢視佈局，或者將瀏覽器視窗縮小到類似手機的寬度，你會發現它作為一個簡單的網站移動檢視執行得相當好。

為中等寬度建立兩列布局

將視窗拖寬，直到你看到行長變得相當長；此時你就有空間讓導航橫向顯示。這就是我們將新增第一個媒體查詢的地方。我們將使用 em 單位，這意味著如果使用者增加了文字大小，斷點將在相似的行長但更寬的視口處發生，而不是文字大小較小的使用者。

將以下內容新增到你的 CSS 底部

css

@media screen and (width >= 40em) {
  article {
    display: grid;
    grid-template-columns: 3fr 1fr;
    column-gap: 20px;
  }

  nav ul {
    display: flex;
  }

  nav li {
    flex: 1;
  }
}

此 CSS 為 <article> 內部的文章內容和 <aside> 元素中的相關資訊提供了一個兩列布局。我們還使用了 flexbox 將導航放在一行中。

為更寬的螢幕新增第三列

讓我們繼續擴大寬度，直到我們覺得有足夠的空間讓側邊欄也形成一個新列。在一個媒體查詢中，我們將把 <main> 元素變成一個兩列網格。然後我們需要移除文章上的 margin-bottom，以便兩個側邊欄相互對齊，並且我們會在頁尾頂部新增一個 border。通常，這些小的調整就是你為了讓設計在每個斷點處看起來美觀而會做的事情。

將以下內容新增到你的 CSS 底部

css

@media screen and (width >= 70em) {
  main {
    display: grid;
    grid-template-columns: 3fr 1fr;
    column-gap: 20px;
  }

  article {
    margin-bottom: 0;
  }

  footer {
    border-top: 1px solid #cccccc;
    margin-top: 2em;
  }
}

示例已完成。如果你以不同寬度檢視結果，你可以看到設計如何根據可用寬度響應並以單列、兩列或三列工作。這是一個移動優先響應式設計的簡單示例。

視口元標籤

如果你檢視上面示例中的 HTML 原始碼，你會看到文件頭部包含了以下元素

html

<meta name="viewport" content="width=device-width,initial-scale=1" />

這是 viewport 元標籤 — 它的存在是為了控制移動瀏覽器如何渲染內容，確保它們尊重你的媒體查詢。上面的標籤告訴移動瀏覽器“不要以 980 畫素的視口渲染內容 — 而是使用真實的裝置寬度渲染，並設定一個預設的初始縮放級別以獲得更好的一致性。” 然後媒體查詢將按預期啟動。

有關為什麼需要此內容的更多資訊，請參閱上一篇文章中的視口元標籤部分。

你真的需要媒體查詢嗎？

Flexbox 和 CSS Grid 提供了無需媒體查詢即可建立靈活甚至響應式元件的方法：始終值得考慮是否真的需要一個。例如，你可能需要一組至少 200 畫素寬的卡片，並儘可能多地將這些 200 畫素的卡片橫跨主內容列排列，無論其寬度如何。

這可以透過 CSS Grid 實現，完全不需要媒體查詢

html

<ul class="grid">
  <li>
    <h2>Card 1</h2>
    <p>…</p>
  </li>
  <li>
    <h2>Card 2</h2>
    <p>…</p>
  </li>
  <li>
    <h2>Card 3</h2>
    <p>…</p>
  </li>
  <li>
    <h2>Card 4</h2>
    <p>…</p>
  </li>
  <li>
    <h2>Card 5</h2>
    <p>…</p>
  </li>
</ul>

css

body {
  font: 1.2em / 1.5 sans-serif;
}
.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.grid li {
  border: 1px solid #666666;
  padding: 10px;
}

嘗試放大和縮小瀏覽器視窗，檢視列軌道的數量變化。

這種方法的好處是網格不關注視口寬度，而是關注它為該元件可用的寬度。用一個建議你可能根本不需要媒體查詢來結束一個關於媒體查詢的部分，這可能看起來很奇怪！然而，在實踐中你會發現，結合媒體查詢良好地使用現代佈局方法，將產生最佳效果。

總結

在本課中，你學習了媒體查詢，並發現瞭如何在實踐中使用它們來建立移動優先的響應式設計。

你可以使用我們建立的起點來測試更多的媒體查詢。例如，你也許可以使用 pointer 媒體特性，在檢測到訪問者擁有粗糙指標時更改導航的大小。

你還可以嘗試新增不同的元件，並檢視是新增媒體查詢，還是使用 flexbox 或 grid 等佈局方法，是使元件具有響應性的最合適方式。很多時候沒有對錯之分——你應該嘗試並看看哪種方法最適合你的設計和內容。

好的，我們快要結束這個模組了。在下一篇文章中，我們將提供一些測試，你可以用來檢查自己對前面幾篇文章中提供的所有響應式網頁設計和媒體查詢資訊的理解和掌握程度。

幫助改進 MDN

瞭解如何貢獻

本頁面最後由 MDN 貢獻者在 2025 年 10 月 13 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題