隨著行動裝置的快速普及，使用者不再只是透過傳統的電腦系來瀏覽Web 內容，越來越多的使用者開始使用各種尺寸的智慧型手機、平板電腦或其它裝置來瀏覽Web 內容，為了確保使用不同裝置的使用者都能擁有不錯的體驗就需要用到媒體查詢。
媒體查詢是CSS 樣式表最重要的功能之一，所謂媒體查詢指的就是根據不同的媒體類型（設備類型）和條件來區分各種設備（例如：電腦、手機、平板電腦、點字設備等），並為它們分別定義不同的CSS 樣式。媒體查詢能讓CSS 可以更精確的作用於不同的裝置或相同裝置的不同條件，讓所有使用者都能得到很好的使用者體驗。
1. 媒體類型
媒體類型用來表示裝置的類別，CSS 中提供了一些關鍵字來表示不同的媒體類型，如下表所示：
2. 媒體特性
除了具體的類型外，還可以透過一些屬性來描述設備的特定特徵，例如寬度、高度、解析度等，如下表所示：
3. 邏輯運算符
邏輯運算子包含not、and 和only 三個，透過邏輯運算子可以建立複雜的媒體查詢，您也可以透過逗號來分隔多個媒體查詢，將它們組合為一個規則。
and：用於將多個媒體查詢組合成一條媒體查詢，當每個查詢規則都為真時則該條媒體查詢為真，另外透過and 操作符還可以將媒體特性與媒體類型結合在一起；
not：用於否定媒體查詢，當查詢規則不為真時則回傳true，否則傳回false。如果使用not 運算符，則也必須指定媒體類型；
only：只有在整個查詢匹配時才會生效，當不使用only 時，舊版的瀏覽器會將screen and (max-width: 500px) 簡單地解釋為screen，忽略查詢的其餘部分，並將樣式應用於所有螢幕。 如果使用only 運算符，則也必須指定媒體類型。
4. 定義媒體查詢
目前您可以透過以下兩種方式定義媒體查詢：
使用@media 或@import 規則在樣式表中指定對應的裝置類型；
以media 屬性在<style>、<link>、<source> 或其他HTML 元素中指定特定的裝置類型。
（1）@media
在《CSS @規則》一節中我們已經簡單了解@media，使用@media 您可以指定一組媒體查詢和一個CSS 樣式區塊，當且僅當媒體查詢與正在使用的裝置相符時，指定的CSS 樣式才會套用於文件。範例程式碼如下：
/*在小於或等於992像素的螢幕上，將背景色設為藍色*/@mediascreenand(max-width:992px){body{background-color:blue;}}/*在600像素或更小的螢幕上，將背景色設定為橄欖色*/@mediascreenand(max-width:600px){body{background-color:olive;}}（2）@import
@import 用來匯入指定的外部樣式檔案並指定目標的媒體類型，範例程式碼如下：
@importurl(css/screen.css)screen;/*引入外部樣式，該樣式僅應用於電腦顯示器*/@importurl(css/print.css)print;/*引入外部樣式，該樣式僅會應用於列印裝置*/body{background:#f5f5f5;line-height:1.2;}注意：所有@import 語句都必須出現在樣式表的開頭，而且在樣式表中定義的樣式會覆寫導入的外部樣式表中衝突的樣式。
（3）media 屬性
您也可以在<style>、<link>、<source> 等標籤的media 屬性中來定義媒體查詢，範例程式碼如下：
/*當頁面寬度大於等於900像素時套用此樣式*/<linkrel=stylesheetmedia=screenand(min-width:900px)href=widescreen.css>/*當頁面寬度小於等於600像素時套用此樣式*/< linkrel=stylesheetmedia=screenand(max-width:600px)href=smallscreen.css>
提示：在media 屬性中您也可以指定多種媒體類型，每種媒體類型之間使用逗號進行分隔，例如media=screen, print。