css3媒體查詢的語法關(guān)鍵字是“@media”，它允許為頁面設(shè)置不同的媒體條件，并根據(jù)條件來應用相應的樣式；基本語法格式為“@media mediatype and|not|only(media feature) {CSS-Code;}”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

媒體查詢（Media Queries）是CSS3中提出的一個新概念，它允許為頁面設(shè)置不同的媒體條件，并根據(jù)條件來應用相應的樣式。

css3媒體查詢的語法關(guān)鍵字是“@media”。

@media 可以針對不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計響應式的頁面，@media 是非常有用的。

當你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。

語法：

@media mediatype and|not|only (media feature) {     CSS-Code; }

only 用來限定整個查詢結(jié)果，not 用對整個查詢結(jié)果取反。如果使用關(guān)鍵字 not 或 only，必須明確指定一個媒體類型，并且關(guān)鍵字必須位于整個媒體查詢語句的開頭。

1）and

關(guān)鍵字 and 用來把媒體類型和多個媒體特性的表達式組合起來，合并到同一條媒體查詢中。只有當媒體類型和每個表達式的結(jié)果都為真時，查詢結(jié)果才為真。如：

screen and (min-width: 700px) and (orientation: landscape)

媒體查詢的結(jié)果是一個布爾值：要么為true，要么為false。只有當 and 連接的所有部分都為true，整條媒體查詢語句的結(jié)果才為 true。

媒體查詢也可以看作是對瀏覽器的提問。上述媒體查詢首先會問“你是一塊顯示器嗎？”，如果瀏覽器回答“是”，會繼續(xù)問“你的最小寬度為700像素嗎？”，如果瀏覽器回答“是”，再繼續(xù)問“你的屏幕處于橫向狀態(tài)嗎？”。只有當三個提問都回答“是”， 整條媒體查詢語句的結(jié)果才為 true。

2）only

關(guān)鍵字 only用來限定范圍，它將作用于整個查詢結(jié)果。如：

only screen and (color)

就僅僅對彩色顯示屏設(shè)備有效，對其他任何設(shè)備均無效。它等價于：

not (screen and (color))

3）not

關(guān)鍵字not用來對整個查詢結(jié)果取反。如：

not (screen and (monochrome))

就表示除單色顯示屏設(shè)備外的所有設(shè)備。它等價于：

not (screen and (monochrome))

而不是：

(not screen) and (monochrome)

除了單個查詢外，也可以定義一個媒體查詢的列表，列表之間用逗號隔開。如果列表中的任意一個媒體查詢的結(jié)果為 true，媒體查詢的列表的結(jié)果就為 true；否則，媒體查詢的列表的結(jié)果就為 false。

媒體查詢列表中的每個查詢相互獨立，一個查詢中的操作符并不影響其它的媒體查詢。因此，媒體查詢列表能作用于不同的媒體類型和媒體屬性。如：

(min-width: 700px), handheld and (orientation: landscape)

上述媒體查詢列表中包含兩個媒體查詢，對于最小寬度為700像素的任何設(shè)備，或者橫屏的手持設(shè)備，媒體查詢列表的結(jié)果為 true，其他情況均為 false。

有了媒體查詢，就可以使用它來構(gòu)建響應式布局了。有兩種使用媒體查詢的方法：一種是使用 @media 規(guī)則，選擇載入不同的CSS代碼；一種是使用 <link> 標簽的 media 屬性，選擇加載不同的樣式表文件。

設(shè)置媒體查詢

1）使用 @media 規(guī)則

使用 @media 規(guī)則，要在同一個CSS 文件中，根據(jù)不同的媒體條件，定義不同的樣式。用戶瀏覽網(wǎng)頁時，瀏覽器會根據(jù)媒體查詢的結(jié)果，選擇應用哪一段CSS代碼。

@media 規(guī)則的語法，是在 @media后，緊跟媒體類型和媒體特性，然后是一對大括號，在大括號中定義相應的樣式規(guī)則。如：

@media screen and (max-device-width: 480px) {   /* 如果設(shè)備寬度 <= 480px，將會應用這里的 CSS 代碼 */ } @media screen and (max-width: 768px) {   /* 如果視口寬度 <= 768px，將會應用這里的 CSS 代碼 */ }

根據(jù)樣式的層疊性，樣式表中后定義的樣式，會覆蓋前面的相同樣式。因此，就可以在樣式表的開頭定義基本樣式，來適應所有的設(shè)計，再使用媒體查詢重寫相應的部分，讓不同的媒體條件應用不同的樣式規(guī)則。

2）使用 <link> 標簽的 media 屬性

使用 <link> 標簽的 media 屬性時，針對不同的媒體條件，定義不同的樣式表文件，瀏覽器會根據(jù)媒體查詢的結(jié)果，加載不同的樣式表文件。

<link rel="stylesheet" media="screen" href="reset.css"> <link rel="stylesheet" media="screen and (max-width: 480px)" href="phone.css"> <link rel="stylesheet" media="screen and (min-width: 768px)" href="screen.css">

這里定義了3個樣式表文件reset.css、phone.css、screen.css，并讓所有的顯示屏設(shè)備都加載reset.css，讓視口寬度小于 480px 的顯示屏設(shè)備加載phone.css，讓視口寬度大于768px的顯示屏設(shè)備加載screen.css。

可以看出，使用第一種方法，要在同一個CSS 文件中，寫好幾遍 @media；使用第二種方法，要寫好幾遍 <link> 標簽。兩種方法的效果相同，可以選擇自己喜歡的方式。

事實上，還可以是CSS的 @import 指令按條件引入其他樣式表。如，以下代碼對給視口最大寬度為 360px 的顯示屏設(shè)備加載一個名為 small.css 的樣式表文件。

@import url("small.css") screen and (max-width: 360px);

但是，使用CSS的 @import 方式會增加HTTP請求，這會影響頁面的加載速度，因此并不推薦使用這種方法。

在媒體查詢中，把設(shè)備寬度的臨界點稱作斷點，并把媒體特性 min-width 和 max-width 對應的屬性值稱作斷點值。

綜上所述，媒體查詢就是使用斷點來創(chuàng)建媒體查詢的條件，并為每個斷點調(diào)用一個樣式表文件（或樣式代碼），來實現(xiàn)在不改變頁面內(nèi)容的情況下，為不同的設(shè)備及不同尺寸的設(shè)備定制顯示效果。

說明：讓IE6~8支持媒體查詢

雖然媒體查詢已經(jīng)被廣泛使用，并得到所有現(xiàn)代瀏覽器的支持，但IE 9以下的老版本瀏覽器卻不支持它?？梢赃x擇給老版本的IE添加墊片腳本，讓它們支持媒體查詢功能。

respond.js（https://github.com/scottjehl/Respond）是一個快速、輕量的 Javascript 工具，它會遍歷頁面上的所有 CSS 引用，并使用媒體查詢分析 CSS 規(guī)則。然后，監(jiān)控瀏覽器寬度的變化，并添加或刪除與媒體查詢匹配的樣式，使原本不支持媒體查詢的IE6-8 支持媒體查詢的 min-width 和 max-width 特性。

respond.js的使用非常簡單，只需在頁面所有的CSS之后，使用IE條件注釋，讓IE6-8版本加載 respond.js 腳本即可：

<!--[if lt IE 9]> <script  src="respond.js "></script> <![endif]-->

但需要注意，respond.js 無法解析CSS的@import指令。因此，建議在已有的樣式表中追加媒體查詢的樣式。如，在樣式表文件中，使用 min-width 或 max-width 定義媒體查詢：

@media screen and (max-width: 480px) {undefined     // 針對視口寬度小于 480px 的顯示屏設(shè)備定義樣式 }

（學習視頻分享：css視頻教程）