Media Queries語法總結

2022-04-06 21:44:26 字數 1768 閱讀 4583

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

開發指南》一書

唐俊開著

圖書詳細資訊

:

Media Queries語法總結

media queries的語法如下所示 media media query media type and media feature 使用media queries樣式模組時都必須以 media 方式開頭。media query表示查詢關鍵字,在這裡可以使用not關鍵字和only關鍵字。not關鍵...

語法分析總

表示出現一次或0次,表示出現0次或多次,表示是乙個整體 程式aint x 1,y 3 int fun int a return 2 a int main int a 3 printf d n fun a 程式a 就是個翻譯單元 乙個完整的c檔案是乙個翻譯單元 翻譯單元由若干個外部宣告和乙個檔案結束符...

Orcale筆記 Merge into 語法總結

接下來我們就做乙個簡單的例項來演示一下 有乙個表t,有兩個欄位a b,我們想在表t中根據a的值判斷是否存在然後進行insert update操作。在microsoft的sql語法中,很簡單的一句判斷就可以了,sql server中的語法如下 if exists select 1from t wher...