設計師可以配合使用者調整設計。 最明顯的例子是使用者裝置的板型規格，包括寬度、裝置顯示比例等等。設計人員可以使用媒體查詢，回應這些不同板型規格。
媒體查詢是透過 @media 關鍵字 (即 CSS 規則型) 啟動，可用於各種用途。
指定不同類型的輸出內容
網站通常會顯示在螢幕上，但 CSS 也可以用於為其他輸出內容設定網站樣式。您可能希望網頁在螢幕上顯示的樣貌與列印時有所不同。您可以透過查詢媒體類型來實現這項功能。
在這個範例中，背景顏色設為灰色。但如果是列印頁面，則背景顏色應為透明。這樣可節省使用者的印表機墨水。
body {
color: black;
background-color: grey;
}
@media print {
body {
background-color: transparent;
}
}
您可以在樣式表中使用 @media at-rule，也可以建立個別的樣式表，並在 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 at-rule。
根據可視區域大小調整樣式
在回應式設計中，最實用的媒體功能之一是瀏覽器可視區域的尺寸。如要在瀏覽器視窗寬度超過特定寬度時套用樣式，請使用 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」並非有效的媒體查詢功能條件。