設計人員可以配合使用者調整設計。 最明顯的例子就是使用者裝置的板型規格、寬度、裝置顯示比例等。設計人員只要使用媒體查詢，就能回應各種板型規格。
媒體查詢是以 @media 關鍵字 (CSS 規則) 啟動，可用於各種用途。
指定不同類型的輸出
網站通常會顯示在畫面上，但 CSS 也能用來設定網站樣式，以便取得其他輸出內容。 你可能想讓網頁在螢幕上呈現某種形式，但列印時則有所不同。 查詢媒體類型就能達到這個目的。
在這個範例中，背景顏色設為灰色。 不過，如果網頁會列印，背景顏色就必須透明。 這項設定會儲存使用者的印表機墨水匣。
body {
color: black;
background-color: grey;
}
@media print {
body {
background-color: transparent;
}
}
您可以依照上述方式在樣式表中使用 @media 規則，也可以建立個別的樣式表，並對 link 元素使用 media 屬性：
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">
如果您沒有為 CSS 指定任何媒體類型，系統會自動將媒體類型的值設為 all。以下兩個 CSS 區塊相等：
body {
color: black;
background-color: white;
}
@media all {
body {
color: black;
background-color: white;
}
}
這兩行 HTML 也是一樣：
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="global.css" media="all">
查詢條件
您可以為媒體類型新增條件。這就是所謂的媒體查詢。只有在媒體類型相符且條件也為 true 時，系統才會套用 CSS。 這些條件稱為媒體功能。
以下是媒體查詢的語法：
@media type and (feature)
如果您的樣式位於獨立樣式表，則可以對 link 元素使用媒體查詢：
<link rel="stylesheet" href="specific.css" media="type and (feature)">
假設您想根據瀏覽器視窗是處於橫向模式 (可視區域寬度大於高度) 還是直向模式 (可視區域高度大於寬度) 套用不同的樣式。有一個名為 orientation 的媒體功能，可用來測試：
@media all and (orientation: landscape) {
// Styles for landscape mode.
}
@media all and (orientation: portrait) {
// Styles for portrait mode.
}
或者，如果您偏好使用不同的樣式表：
<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">
在此案例中，媒體類型為 all。由於這是預設值，因此可視需要省略：
@media (orientation: landscape) {
// Styles for landscape mode.
}
@media (orientation: portrait) {
// Styles for portrait mode.
}
或使用個別的樣式表：
<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">
雖然針對不同媒體「類型」 (例如 print) 使用不同的樣式表是可能的，但我們不建議針對每個媒體查詢使用不同的樣式表。請改用 @media 規則。
根據可視區域大小調整樣式
就回應式設計而言，最實用的媒體功能之一就是瀏覽器可視區域的尺寸。如要在瀏覽器視窗寬度超過特定寬度時套用樣式，請使用 min-width。
@media (min-width: 400px) {
// Styles for viewports wider than 400 pixels.
}
使用 max-width 媒體功能，即可套用特定寬度以下的樣式：
@media (max-width: 400px) {
// Styles for viewports narrower than 400 pixels.
}
您可以在媒體查詢中使用任何 CSS 長度單位。如果您的內容大多是以圖片為基礎，使用像素會是最適當的做法。
如果您的內容大多以文字為主，最好使用以文字大小為基礎的「相對單位」，例如 em 或 ch：
@media (min-width: 25em) {
// Styles for viewports wider than 25em.
}
您也可以合併媒體查詢，套用多個條件。使用 and 字詞合併媒體查詢：
@media (min-width: 50em) and (max-width: 60em) {
// Styles for viewports wider than 50em and narrower than 60em.
}
根據內容選擇中斷點
媒體功能條件變成 true 的時間點稱為中斷點。 建議您根據內容選擇中斷點，而非熱門裝置尺寸，因為它們會隨著每個技術的發布週期而改變。
在這個範例中，50em 是指文字行不舒服的時間點。系統會建立中斷點，讓介面更清晰易讀。使用 column-count 屬性時，文字會從該點開始分割為兩個資料欄。
@media (min-width: 50em) {
article {
column-count: 2;
}
}
組合
您可以根據可視區域高度 (而不只是寬度) 使用媒體查詢。這對於最佳化「不需捲動位置」的介面內容可能有幫助。在上一個範例中，如果讀者使用的瀏覽器視窗很短，但瀏覽器視窗很短，就必須向下捲動其中一欄，再向上捲動才能移至第二欄頂端。只有在可視區域的寬度和高度都夠高時，才能套用資料欄，這樣比較安全。
您可以合併媒體查詢，讓系統只在符合所有條件時套用樣式。
在這個範例中，可視區域至少要有 50em 寬和 60em 高，才能套用欄樣式。並根據內容量選擇這些中斷點。
@media (min-width: 50em) and (min-height: 60em) {
article {
column-count: 2;
}
}
這些範例說明如何使用媒體查詢，根據使用者裝置的板型規格調整設計，但這些查詢僅止於發掘可能的表面。媒體查詢不只寬度和高度，還能存取使用者對無障礙功能和主題顏色的偏好設定。使用媒體查詢調整版面配置是很好的入門秘訣，您可根據這些功能等條件來建構回應式設計。
隨堂測驗
測驗您對回應式媒體查詢的相關知識。
媒體查詢只會針對螢幕大小查詢嗎？
螢幕是唯一使用或顯示網路內容的位置嗎？
預設媒體類型為？
screenscreen 並非預設類型。nonenone」並非有效的媒體類型。allsomesome」並非有效的媒體類型。landscapelandscape」並非有效的媒體類型。下列何者是防止瀏覽器在行動裝置上縮放設計的方法？
width: 100%font-size: 200%<meta name="viewport" content="width=device-width, initial-scale=1">瀏覽器視窗位於 720px 上方時，系統會套用哪一個媒體查詢。
@media (width: 720px)720px 的情況下，系統才會執行這項媒體查詢。@media (max-width: 720px)720px 的情況。@media (min-width: 720px)720px，因此你可以讀取這則訊息。@media (clamp-width: 720px)clamp-width」不是有效的媒體查詢功能條件。