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種裝置類型。

media_feature的主要作用是定義CSS中的裝置特性，大部分移動裝置特性都允許接受min/ max的字首。例如，min-width表示指定大于等于該值；max-width表示指定小于等于該值。

表6-2顯示media_feature裝置特性的種類一覽表。

到目前為止，Media Queries樣式子產品在桌面端都得到了大部分現代浏覽器的支援。例如IE 9浏覽器、Firefox浏覽器、Safari浏覽器、Chrome浏覽器、Opera浏覽器。但是IE系列的浏覽器中隻有最新版本才支援該特性，IE8以下的版本不支援Media Queries。

從移動平台來說，基于兩大平台Android和iOS的Web浏覽器也都得到了良好的支援。同時，黑莓系列手機也支援Media Queries特性。

本文節選自《HTML5移動Web開發指南》一書 唐俊開著