CSS媒體查詢（@media）全面解析

109701 閱讀 0 評論 0 點(diǎn)贊

隨著移動(dòng)設(shè)備的快速普及，用戶不再只是通過傳統(tǒng)的電腦系來瀏覽 Web 內(nèi)容，越來越多的用戶開始使用各種尺寸的智能手機(jī)、平板電腦或者其它設(shè)備來瀏覽 Web 內(nèi)容，為了確保使用不同設(shè)備的用戶都能擁有不錯(cuò)的體驗(yàn)就需要用到媒體查詢。

媒體查詢是 CSS 樣式表最重要的功能之一，所謂媒體查詢指的就是根據(jù)不同的媒體類型（設(shè)備類型）和條件來區(qū)分各種設(shè)備（例如：電腦、手機(jī)、平板電腦、盲文設(shè)備等），并為它們分別定義不同的 CSS 樣式。媒體查詢能讓 CSS 可以更精確的作用于不同的設(shè)備或同一設(shè)備的不同條件，讓所有用戶都能得到很好的用戶體驗(yàn)。

1. 媒體類型

媒體類型用來表示設(shè)備的類別，CSS 中提供了一些關(guān)鍵字來表示不同的媒體類型，如下表所示：

媒體類型	描述
all	表示所有的媒體設(shè)備
aural	（聽覺的，聽的）表示語音和音頻合成器（聽覺設(shè)備）
braille	（用盲文寫的）表示盲人用點(diǎn)字法觸覺回饋設(shè)備
embossed	表示盲人用點(diǎn)字法打印機(jī)
handheld	表示小型手持設(shè)備，如手機(jī)、平板電腦
print	表示打印機(jī)
projection	表示投影設(shè)備
screen	表示電腦顯示器
tty	表示使用固定密度字母柵格的媒體，比如打字機(jī)或終端設(shè)備
tv	表示電視機(jī)類型的設(shè)備

2. 媒體特性

除了具體的類型外，還可以通過一些屬性來描述設(shè)備的具體特征，例如寬度、高度、分辨率等，如下表所示：

值	描述
aspect-ratio	（縱橫比）輸出設(shè)備頁面可見區(qū)域的寬高比
color	輸出設(shè)備每個(gè)像素的比特值，常見的有 8、16、32 位。如果設(shè)備不支持輸出彩色，則該值為 0
color-index	輸出設(shè)備的顏色查詢表中的條目數(shù)量。如果沒有使用顏色查詢表，則該值等于 0
device-aspect-ratio	輸出設(shè)備的寬高比
device-height	輸出設(shè)備屏幕的可見高度
device-width	輸出設(shè)備屏幕的可見寬度
grid	查詢輸出設(shè)備使用的是網(wǎng)格屏幕還是點(diǎn)陣屏幕
height	頁面可見區(qū)域的高度
max-aspect-ratio	輸出設(shè)備屏幕可見區(qū)域?qū)挾扰c高度的最大比率
max-color	輸出設(shè)備每個(gè)像素比特值的最大值
max-color-index	輸出設(shè)備的顏色查詢表中的最大條目數(shù)
max-device-aspect-ratio	輸出設(shè)備屏幕可見區(qū)域?qū)挾扰c高度的最大比率
max-device-height	輸出設(shè)備屏幕可見區(qū)域的最大高度
max-device-width	輸出設(shè)備屏幕的最大可見寬度
max-height	頁面可見區(qū)域的最大高度
max-monochrome	輸出設(shè)備單色幀緩沖區(qū)中每個(gè)像素的最大位深度。如果設(shè)備并非黑白屏幕，則該值為 0
max-resolution	設(shè)備的最大分辨率
max-width	頁面可見區(qū)域的最大寬度
min-aspect-ratio	輸出設(shè)備屏幕可見區(qū)域?qū)挾扰c高度的最小比率
min-color	輸出設(shè)備每個(gè)像素比特值的最小值
min-color-index	輸出設(shè)備的顏色查詢表中的最小條目數(shù)
min-device-aspect-ratio	輸出設(shè)備的屏幕可見區(qū)域?qū)挾扰c高度的最小比率
min-device-width	輸出設(shè)備的屏幕的最小可見寬度
min-device-height	頁面可見區(qū)域的最小高度
min-monochrome	輸出設(shè)備單色幀緩沖區(qū)中每個(gè)像素的最小位深度。如果設(shè)備并非黑白屏幕，則該值為 0
min-resolution	設(shè)備的最小分辨率
min-width	頁面可見區(qū)域的最小寬度
monochrome	輸出設(shè)備單色幀緩沖區(qū)中每個(gè)像素的位深度。如果設(shè)備并非黑白屏幕，則該值為 0
orientation	頁面可見區(qū)域的旋轉(zhuǎn)方向
resolution	設(shè)備的分辨率。如：96dpi、300dpi、118dpcm
scan	電視類設(shè)備的掃描工序
width	頁面可見區(qū)域的寬度

3. 邏輯操作符

邏輯操作符包含 not、and 和 only 三個(gè)，通過邏輯操作符可以構(gòu)建復(fù)雜的媒體查詢，您還可以通過逗號(hào)來分隔多個(gè)媒體查詢，將它們組合為一個(gè)規(guī)則。

and：用于將多個(gè)媒體查詢組合成一條媒體查詢，當(dāng)每個(gè)查詢規(guī)則都為真時(shí)則該條媒體查詢?yōu)檎?，另外通過 and 操作符還可以將媒體特性與媒體類型結(jié)合在一起；

not：用于否定媒體查詢，當(dāng)查詢規(guī)則不為真時(shí)則返回 true，否則返回 false。如果使用 not 操作符，則還必須指定媒體類型；

only：僅在整個(gè)查詢匹配時(shí)才會(huì)生效，當(dāng)不使用 only 時(shí)，舊版的瀏覽器會(huì)將 screen and (max-width: 500px) 簡單地解釋為 screen，忽略查詢的其余部分，并將樣式應(yīng)用于所有屏幕。如果使用 only 運(yùn)算符，則還必須指定媒體類型。

4. 定義媒體查詢

目前您可以通過以下兩種方式來定義媒體查詢：

使用 @media 或 @import 規(guī)則在樣式表中指定對應(yīng)的設(shè)備類型；

用 media 屬性在 <style>、<link>、<source> 或其他 HTML 元素中指定特定的設(shè)備類型。

（1）@media

在《CSS @規(guī)則》一節(jié)中我們已經(jīng)簡單了解 @media，使用 @media 您可以指定一組媒體查詢和一個(gè) CSS 樣式塊，當(dāng)且僅當(dāng)媒體查詢與正在使用的設(shè)備匹配時(shí)，指定的 CSS 樣式才會(huì)應(yīng)用于文檔。示例代碼如下：

/* 在小于或等于 992 像素的屏幕上，將背景色設(shè)置為藍(lán)色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
 
/* 在 600 像素或更小的屏幕上，將背景色設(shè)置為橄欖色 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

（2）@import

@import 用來導(dǎo)入指定的外部樣式文件并指定目標(biāo)的媒體類型，示例代碼如下：

@import url("css/screen.css") screen;   /* 引入外部樣式，該樣式僅會(huì)應(yīng)用于電腦顯示器 */
@import url("css/print.css") print;     /* 引入外部樣式，該樣式僅會(huì)應(yīng)用于打印設(shè)備 */
body {
    background: #f5f5f5;
    line-height: 1.2;
}

注意：所有 @import 語句都必須出現(xiàn)在樣式表的開頭，而且在樣式表中定義的樣式會(huì)覆蓋導(dǎo)入的外部樣式表中沖突的樣式。

（3）media 屬性

您還可以在 <style>、<link>、<source> 等標(biāo)簽的 media 屬性中來定義媒體查詢，示例代碼如下：

/* 當(dāng)頁面寬度大于等于 900 像素時(shí)應(yīng)用該樣式 */
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
/* 當(dāng)頁面寬度小于等于 600 像素時(shí)應(yīng)用該樣式 */
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

提示：在 media 屬性中您還可以指定多種媒體類型，每種媒體類型之間使用逗號(hào)進(jìn)行分隔，例如 media="screen, print"。

點(diǎn)贊(0)