Media Queries文法總結

標籤：android   blog   http   color   使用   os   

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特性。

 

來自http://book.51cto.com/art/201204/328362.htm