響應式web設計之CSS3 Media Queries

6.6.4  Media Queries語法總結

Media Queries的語法以下所示：

@media [media_query] media_type and media_feature

使用Media Queries樣式模塊時都必須以"@media"方式開頭。

media_query表示查詢關鍵字，在這裏可使用not關鍵字和only關鍵字。not關鍵字表示對後面的樣式表達式執行取反操做。例如以下代碼：

@media not screen and (max-device-width:480px)

 

only關鍵字的做用是，讓不支持Media Queries的設備但能讀取Media Type類型的瀏覽器忽略這個樣式。例如以下代碼：

@media only screen and (max-device-width:480px)

對於支持Media Queries的移動設備來講，若是存在only關鍵字，移動設備的Web瀏覽器會忽略only關鍵字並直接根據後面的表達式應用樣式文件。對於不支持Media Queries的設備但可以讀取Media Type類型的Web瀏覽器，遇到only關鍵字時會忽略這個樣式文件。

雖然media_query這個類型在整個Media Queries語法中並非必需的類型，可是有時候在實際開發過程當中倒是很是重要的查詢參數類型。

media_type參數的做用是指定設備類型，一般稱爲媒體類型。實際上在CSS2.1版本時已經定義了該媒體類型。表6-1列出了media_type容許定義的10種設備類型。

表6 1  media_type設備可用類型一覽表

media_type	設備類型說明
all	全部設備
aural	聽覺設備
braille	點字觸覺設備
handled	便攜設備，如手機、平板電腦
print	打印預覽圖等
projection	投影設備
screen	顯示器、筆記本、移動端等設備
tty	如打字機或終端等設備
tv	電視機等設備類型
embossed	盲文打印機

media_feature的主要做用是定義CSS中的設備特性，大部分移動設備特性都容許接受min/ max的前綴。例如，min-width表示指定大於等於該值；max-width表示指定小於等於該值。

表6-2顯示media_feature設備特性的種類一覽表。

表6 2  media_feature設備特性一覽表

設 備 特 性	是否容許 min/max 前綴	特 性 的 值	說    明
width	容許	含單位的數值	指定瀏覽器窗口的寬度大小， 如480像素
height	容許	含單位的數值	指定瀏覽器窗口的高度大小， 如320像素
device-width	容許	含單位的數值	指定移動設備的屏幕分 辨率寬度大小，如480像素
device-height	容許	含單位的數值	指定移動設備的屏幕分 辨率高度大小，如320像素
orientation	不容許	字符串值	指定移動設備瀏覽器的窗口方向。 只能指定portrait（縱向）和landscape （橫向）兩個值
aspect-radio	容許	比例值	指定移動設備瀏覽器窗口的 縱橫比例，如16:9
device-aspect-radio	容許	比例值	指定移動設備屏幕分辨率的 縱橫比例，如16:9
color	容許	整數值	指定移動設備使用多少位的顏色值
color-index	容許	整數值	指定色彩表的色彩數
monochrome	容許	整數值	指定單色幀緩衝器中每像素的字節數
resolution	容許	分辨率值	指定移動設備屏幕的分辨率
scan	不容許	字符串值	指定電視機類型設備的掃描方式。 只能指定兩種值：progressive表 示逐行掃描和interlace表示隔行掃描
grid	不容許	整數值	指定設備是基於柵格仍是基於位圖。 基於柵格時該值爲1，不然爲0

到目前爲止，Media Queries樣式模塊在桌面端都獲得了大部分現代瀏覽器的支持。例如IE 9瀏覽器、Firefox瀏覽器、Safari瀏覽器、Chrome瀏覽器、Opera瀏覽器。可是IE系列的瀏覽器中只有最新版本才支持該特性，IE8如下的版本不支持Media Queries。

從移動平臺來講，基於兩大平臺Android和iOS的Web瀏覽器也都獲得了良好的支持。同時，黑莓系列手機也支持Media Queries特性。