設計人員可以調整設計，以配合使用者需求。 最明顯的例子就是使用者裝置的板型規格，包括寬度、裝置顯示比例和其他方面。設計師可以使用媒體查詢，因應這些不同的板型規格。
媒體查詢會以 @media 關鍵字 (CSS at-rule) 啟動，可用於各種用途。
指定不同類型的輸出內容
網站通常會顯示在螢幕上，但 CSS 也可用於設定其他輸出內容的樣式。 您可能希望網頁在螢幕上顯示一種樣式，但列印出來時是另一種樣式。 您可以查詢媒體類型，藉此達成上述目標。
在本範例中，背景顏色設為灰色。 但如果列印網頁，背景顏色應為透明。 這樣可節省使用者的印表機墨水。
body {
color: black;
background-color: grey;
}
@media print {
body {
background-color: transparent;
}
}
您可以在樣式表中使用 @media at 規則，也可以建立個別的樣式表，並在 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 規則。
根據可視區域大小調整樣式
在回應式設計中，最實用的媒體功能之一是瀏覽器可視區域的尺寸。
如要在瀏覽器視窗寬度超過特定寬度時套用樣式，請使用 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. */
}
您也可以使用 width 媒體功能和「小於或等於」運算子編寫這項媒體查詢。
@media (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. /*
}
也可以使用範圍語法撰寫。
@media (50em <= 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，高度至少須為 30em，才能套用欄樣式。
這些中斷點是根據內容量選擇。
@media (min-width: 50em) and (min-height: 30em) {
article {
column-count: 2;
}
}
您也可以使用 or 和 not 關鍵字，在套用樣式時表達更複雜的情況。這些項目在邏輯上可能難以推論，因此請務必測試這些項目是否正常運作及互動。
@media not ((width >= 30em) or (orientation: landscape)) {
/* These styles won't be shown if the viewport is wider than 30em, or if the orientation is landscape. */
.navlist {
flex-direction: column;
}
}
這些範例說明如何使用媒體查詢，根據使用者裝置的外型規格調整設計，但這只是冰山一角。媒體查詢不僅限於寬度和高度，還能存取使用者對無障礙功能和主題顏色的偏好設定。使用媒體查詢調整版面配置，是回應式設計的絕佳起點，而回應式設計會以這些功能為基礎，並加入更多功能。
隨堂測驗
測驗您對回應式媒體查詢的瞭解程度。
媒體查詢是否只適用於螢幕大小？
螢幕是唯一可顯示或使用網路內容的地方嗎？
預設媒體類型為何？
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」不是有效的媒體查詢功能條件。