@media 媒體查詢

1、@media媒體查詢用途

        媒體查詢Media Queries，能夠根據不一樣的設備爲其實現不一樣的樣式。@media能夠根據不一樣的屏幕尺寸設置不一樣的樣式，頁面佈局分別適應移動端、pc端等，在調整瀏覽器的大小，頁面會根據媒體的寬度和高度來從新佈置樣式。

       CSS2中使用的@media媒體查詢在不少設備上支持的還不夠友好，CSS3的多媒體查詢繼承了CSS2多媒體類型的全部思想，取代了查找設備的類型，CSS3根據設置自適應顯示。

        媒體查詢能夠用於檢測不少東西：自動檢測viewpoint（視窗）的寬度和高度；設備的寬度和高度；旋轉方向（智能手機橫屏或豎屏）；分辨率大小。

 

2、CSS3語法規則

（一）直接寫在css樣式中

@media  mediatype  and/not/only  (media feature) { CSS-Code }

如何理解@media的語法規則：

使用媒體查詢必須是以 @media 開頭；

而後指定設備類型（媒體類型mediatype）；

接着是括號()裏的規定媒體/設備特徵（media feature），媒體特徵的書寫格式與css樣式相似，都是屬性名：屬性值（例如min-width：200px）；

最後跟着的大括號{ css-code }，裏面放置的是要設置的css樣式。

邏輯運算符：

　　not：用來排除某種設備。好比，排除打印設備 @media not print；

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

　　all：適用於全部的設備類型；

　　and：媒體查詢中使用來鏈接多種媒體特性,一個媒體查詢中能夠包含0或多個表達式，表達式能夠是0或多個關鍵字，以及一種媒體類型。

如：@media screen and (max-width:800px) and (min-width:400px)

 

（二） 針對不一樣的媒體設備外部鏈入不一樣的 stylesheets（外部樣式表）

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

定義媒體查詢的部分放在<link>標籤內，用media屬性標註，media="  媒體類型  and/not/only（媒體特性）"

 

3、瀏覽器兼容

 

4、CSS3多媒體的類型  MediaType

• all  適用於全部類型
• print  適用於打印機和打印預覽
• screen  適用於電腦屏幕、平板電腦、智能手機等
• speech  適用於屏幕閱讀器

 

5、媒體特性 Media Feature

值	描述
aspect-ratio	定義輸出設備中的頁面可見區域寬度與高度的比率
color	定義輸出設備每一組彩色原件的個數。若是不是彩色設備，則值等於0
color-index	定義在輸出設備的彩色查詢表中的條目數。若是沒有使用彩色查詢表，則值等於0
device-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的比率。
device-height	定義輸出設備的屏幕可見高度。
device-width	定義輸出設備的屏幕可見寬度。
grid	用來查詢輸出設備是否使用柵格或點陣。
height	定義輸出設備中的頁面可見區域高度。
max-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的最大比率。
max-color	定義輸出設備每一組彩色原件的最大個數。
max-color-index	定義在輸出設備的彩色查詢表中的最大條目數。
max-device-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的最大比率。
max-device-height	定義輸出設備的屏幕可見的最大高度。
max-device-width	定義輸出設備的屏幕最大可見寬度。
max-height	定義輸出設備中的頁面最大可見區域高度。
max-monochrome	定義在一個單色框架緩衝區中每像素包含的最大單色原件個數。
max-resolution	定義設備的最大分辨率。
max-width	定義輸出設備中的頁面最大可見區域寬度。
min-aspect-ratio	定義輸出設備中的頁面可見區域寬度與高度的最小比率。
min-color	定義輸出設備每一組彩色原件的最小個數。
min-color-index	定義在輸出設備的彩色查詢表中的最小條目數。
min-device-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的最小比率。
min-device-width	定義輸出設備的屏幕最小可見寬度。
min-device-height	定義輸出設備的屏幕的最小可見高度。
min-height	定義輸出設備中的頁面最小可見區域高度。
min-monochrome	定義在一個單色框架緩衝區中每像素包含的最小單色原件個數
min-resolution	定義設備的最小分辨率。
min-width	定義輸出設備中的頁面最小可見區域寬度。
monochrome	定義在一個單色框架緩衝區中每像素包含的單色原件個數。若是不是單色設備，則值等於0
orientation	定義輸出設備中的頁面可見區域高度是否大於或等於寬度。
resolution	定義設備的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定義電視類設備的掃描工序。
width	定義輸出設備中的頁面可見區域寬度。

 

6、應用實例

瞭解了媒體類型和媒體特性，或發現其書寫類型和css樣式基本一致，可是在media queries中，使用max / min來表示大於等於小於以此做爲邏輯判斷。而不是使用大於號>或小於號(<)符號進行判斷。來看一下具體實例：

！注意:爲元素設置css樣式的屬性，假如與媒體查詢中設置的媒體樣式是相同的屬性時。那麼須要注意 ，元素的css樣式要寫在媒體查詢上面，不然css樣式會覆蓋媒體樣式，使其失效。

例如：

         

 （一）最小寬度min-width

min-width規則爲：當媒體類型大於或是等於指定的寬度時，大括號內的樣式生效；

例：

1 body { 2  background-color:lightgreen; 3 } 4 5 @media screen and (min-width: 700px) { 6  body { 7  background-color:lightblue; 8 } 9 }

規定最小寬度爲700px，當瀏覽器窗口的寬度大於或等於700px時，則主體區域的背景顏色變爲 淡藍色。

若寬度小於700px，主體區域背景顏色保持原有樣式，顯示爲爲淡綠色。

（若是想讓lightblue生效，就必須使寬度大於或等於700px，700px如下的寬度無效。區間爲[>700]）

 

（二）最大寬度max-width

max-width規則爲：當媒體類型小於或是等於指定的寬度時，大括號內的樣式生效；

1 body { 2  background-color:lightgreen; 3 } 4 5 @media screen and (max-width: 700px) { 6  body { 7  background-color:lightblue; 8 } 9 }

規定最大寬度爲700px，當瀏覽器窗口的寬度小於或等於700px時，則主體區域的背景顏色變爲 淡藍色。

若寬度大於700px，主體區域背景顏色保持原有樣式，顯示爲爲淡綠色。

（若是想讓lightblue生效，就必須把寬度保持在700px之下，700px及更大的寬度無效。區間爲[0，700]）

 

（三）同時設置多個媒體特性

使用and屬性來設置多個媒體特徵。一個媒體查詢中能夠包含0或多個表達式，表達式能夠是0或多個關鍵字，以及一種媒體類型。

1 body { 2  background-color:lightgreen; 3 } 4 @media screen and (max-width: 1000px) and (min-width: 700px){ 5  body { 6  background-color:lightblue; 7 } 8 }

最大寬度爲1000px，最小寬度爲700px，因此屏幕寬度要保持在大於等於700px且小於等於1000px的範圍內。背景顏色爲淺藍色的設置才能生效。區間爲[1000,700]。

一樣也能夠同時設置多個媒體查詢

寬度大於1000px背景顏色淺綠色；寬度700px~1000px時背景顏色爲淺藍色，寬度爲699px~399px時背景顏色爲紅色。

 

（四）輸出設備的屏幕可見寬度  device-width

在智能設備上，例如iPhone、iPad等，還能夠根據屏幕設備的尺寸來設置相應的樣式（或者調用相應的樣式文件）。

width和height有能夠指定最大最小值，一樣的，對於屏幕設備一樣可使用「min/max」對應參數，如「min-device-width」或者「max-device-width」。

最大/最小屏幕可見寬度。

 <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

表示外部樣式iphone.css適用於最大設備寬度爲480px。device-width指的是設備的實際分辨率（可視面積的分辨率）

 

（五）not關鍵字

使用not關鍵字來排除某種所指定設備類型，排除後面表達式中的媒體類型。not表現的效果就是「非」，對後面跟着的表達式進行否認定義。

@media not print and（max-width：200px）{body{background：blue}}

樣式代碼將被使用在除打印設備和設備寬度小於200px下全部設備中。

 

（六）only關鍵字

only用來指定某種特定的媒體類型，能夠用來排除不支持媒體查詢的瀏覽器。其實only不少時候是用來對那些不支持Media Query但卻支持Media Type的設備隱藏樣式表的。

支持媒體特性的設備，正常調用樣式，此時就當only不存在；

表示不支持媒體特性但又支持媒體類型的設備，這樣就會不讀樣式，由於其先會讀取only而不是screen；

另外不支持Media Queries的瀏覽器，不管是否支持only，樣式都不會被採用