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關鍵字的作用是，讓不支援mediaqueries的裝置但能讀取mediatype型別的瀏覽器忽略這個樣式。例如如下**：

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

對於支援media queries的移動裝置來說，如果存在only關鍵字，移動裝置的web瀏覽器會忽略only關鍵字並直接根據後面的表示式應用樣式檔案。對於不支援mediaqueries的裝置但能夠讀取mediatype型別的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開發指南》一書唐俊開著

圖書詳細資訊: