css3媒體查詢的語法關鍵字是什麼

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

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

媒體查詢（Media Queries）是CSS3中提出的一個新概念，它允許為頁面設定不同的媒體條件，並根據條件來套用對應的樣式。

css3媒體查詢的語法關鍵字是「@media」。

@media 可以為不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。

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

語法：

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

only 用來限定整個查詢結果，not 用對整個查詢結果取反。如果使用關鍵字 not 或 only，必須明確指定媒體類型，且關鍵字必須位於整個媒體查詢語句的開頭。

1）and

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

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

媒體查詢的結果是一個布林值：要嘛為true，要嘛為false。只有當 and 連接的所有部分都為true，整個媒體查詢語句的結果才會為 true。

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

2）only

關鍵字 only用來限定範圍，它將作用於整個查詢結果。如：

only screen and (color)

就僅僅對彩色顯示器設備有效，對其他任何裝置無效。它等價於：

not (screen and (color))

3）not

關鍵字not用來對整個查詢結果取反。如：

not (screen and (monochrome))

就表示除單色顯示器裝置外的所有裝置。它等價於：

not (screen and (monochrome))

而不是：

(not screen) and (monochrome)

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

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

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

上述媒體查詢清單中包含兩個媒體查詢，對於最小寬度為700像素的任何設備，或橫屏的手持設備，媒體查詢列表的結果為true，其他情況均為false 。

有了媒體查詢，就可以用它來建立響應式佈局了。有兩種使用媒體查詢的方法：一種是使用 @media 規則，選擇載入不同的CSS程式碼；一種是使用 標籤的 media 屬性，選擇載入不同的樣式表檔案。

設定媒體查詢

1）使用@media 規則

使用@media 規則，要在同一個CSS 檔案中，根據不同的媒體條件，定義不同的樣式。使用者瀏覽網頁時，瀏覽器會根據媒體查詢的結果，選擇套用哪一段CSS程式碼。

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

@media screen and (max-device-width: 480px) { 
 /* 如果设备宽度 <= 480px，将会应用这里的 CSS 代码 */
}
@media screen and (max-width: 768px) { 
 /* 如果视口宽度 <= 768px，将会应用这里的 CSS 代码 */
}

根據樣式的層疊性，樣式表中後定義的樣式，會覆寫前面相同的樣式。因此，就可以在樣式表的開頭定義基本樣式，以適應所有的設計，再使用媒體查詢重寫對應的部分，讓不同的媒體條件套用不​​同的樣式規則。

2）使用 標籤的media 屬性

#使用 標籤的media 屬性時，針對不同的媒體條件，定義不同的樣式表文件，瀏覽器會根據媒體查詢的結果，載入不同的樣式表檔案。

<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，並讓所有的顯示器設備都載入reset.css，讓視口寬度小於480px 的顯示器設備載入phone.css，讓視窗寬度大於768px的顯示器裝置載入screen.css。

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

事实上，还可以是CSS的 @import 指令按条件引入其他样式表。如，以下代码对给视口最大宽度为 360px 的显示屏设备加载一个名为 small.css 的样式表文件。

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

但是，使用CSS的 @import 方式会增加HTTP请求，这会影响页面的加载速度，因此并不推荐使用这种方法。

在媒体查询中，把设备宽度的临界点称作断点，并把媒体特性 min-width 和 max-width 对应的属性值称作断点值。

综上所述，媒体查询就是使用断点来创建媒体查询的条件，并为每个断点调用一个样式表文件（或样式代码），来实现在不改变页面内容的情况下，为不同的设备及不同尺寸的设备定制显示效果。

说明：让IE6~8支持媒体查询

虽然媒体查询已经被广泛使用，并得到所有现代浏览器的支持，但IE 9以下的老版本浏览器却不支持它。可以选择给老版本的IE添加垫片脚本，让它们支持媒体查询功能。

respond.js（https://github.com/scottjehl/Respond）是一个快速、轻量的 Javascript 工具，它会遍历页面上的所有 CSS 引用，并使用媒体查询分析 CSS 规则。然后，监控浏览器宽度的变化，并添加或删除与媒体查询匹配的样式，使原本不支持媒体查询的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 的显示屏设备定义样式
}

（学习视频分享：css视频教程）

以上是css3媒體查詢的語法關鍵字是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！