media type與media query

media type(媒體類型)是css 2中的一個很是有用的屬性，經過media type咱們能夠對不一樣的設備指定特定的樣式，從而實現更豐富的界面。media query(媒體查詢)是對media type的一種加強，是CSS 3的重要內容之一。隨着移動互聯網的發展，media query開始獲得你們的重視。

media type

讓咱們先了解一下media type，其實這個你們會比較熟悉一點，咱們一般會用到的media type會是all 和screen，而後是print，一些網站會專門經過print類型爲頁面的打印格式提供更友好的界面。
其實，media type有不少種：

類型	解釋
all	全部設備
braille	盲文
embossed	盲文打印
handheld	手持設備
print	文檔打印或打印預覽模式
projection	項目演示，好比幻燈
screen	彩色電腦屏幕
speech	演講
tty	固定字母間距的網格的媒體，好比電傳打字機
tv	電視

media type的幾種使用方法

咱們能夠經過幾種方法來聲明media type：

方法一

<link href="style.css" media="screen print" ...

方法二

<?xml-stylesheet media="screen" href="style.css"...

方法三

@import url("style.css") screen;

方法四

1 2 3

<style media="screen"> @import url("style.css");</style>

方法五

1 2 3

@media screen{ selector{rules} }

固然，這幾種方法各有利弊，而咱們經常使用的是第一種和最後一種方法。

media type的瀏覽器支持

• IE5.5/6/7不支持在@import中使用媒體類型
• Safari/firefox只支持all,screen,print三種類型(包括iphone)
• Opera 徹底支持
• Opera mini  支持handheld，未指定則使用screen
• Windows Mobile系統中的IE支持handheld，其它支持不明…

media query

正如前文所說，media query是CSS 3對media type的加強，事實上咱們能夠將media query當作是media type+css屬性判斷。

請注意，下面提到的一些關鍵字等內容，有些是在media type中就可用的，可是放到media query中將能更好的發揮其做用，因此我就在適當的地方引入。

css屬性判斷能夠只是某個CSS屬性的名稱，也能夠是屬性+值：

<link rel="stylesheet" media="screen and (animation)」 herf=「…」

若是設備支持CSS動畫，那麼就能執行這個外部樣式表文件。

1 2 3

@media screen and (max-width:240px){ body{font-size:medium;} }

若是設備的瀏覽器的最大寬度是240px，則頁面將使用中號字體。

PS:屬性和值之間是用冒號鏈接的，而不是等號，這與正常的CSS的寫法一致。

媒體查詢語句結構

咱們能夠將上述語句稱爲媒體查詢語句，這樣也更能理解一些。從上面的例子也能夠看出，媒體查詢語句通常由media type+一到多個CSS屬性判斷組成，而多個CSS屬性判斷能夠用關鍵字and鏈接：

1 2 3

@media screen and (min-width:1024px) and (max-width:1280px){ body{font-size:medium;} }

其中media type能夠省略，屬性值也能夠爲空：

@media (color:4){}

@media (color){}

固然，請注意，有屬性值和沒有屬性值的狀況表明的意義是不同的，因此上面的這兩條規則不是等價的。

而針對多個媒體類型的CSS規則，能夠用逗號來隔開：

1 2 3

@media handheld and (min-width:360px),screen and (min-width:480px){ body{font-size:large;} }

1 2 3

@media screen and (min-width:800px),print and (min-width:7in){ body{font-size:small;} }

media query支持的屬性

事實上，media query支持的屬性和咱們經常使用的CSS屬性是不太同樣的，它們是一些特別定義的條目：

屬性	值	Min/Max	描述
color	整數	yes	每種色彩的字節數
color-index	整數	yes	色彩表中的色彩數
device-aspect-ratio	整數/整數	yes	寬高比例
device-height	length	yes	設備屏幕的輸出高度
device-width	length	yes	設備屏幕的輸出寬度
grid	整數	no	是不是基於格柵的設備
height	length	yes	渲染界面的高度
monochrome	整數	yes	單色幀緩衝器中每像素字節
resolution	分辨率(「dpi/dpcm」)	yes	分辨率
scan	Progressive interlaced	no	tv媒體類型的掃描方式
width	length	yes	渲染界面的寬度
orientation	Portrait/landscape	no	橫屏或豎屏

從這些屬性中咱們能夠看出，media query就是爲了更好的適配各類設備而生的。

瀏覽器擴展

webkit

webkit是最先實現media query支持的瀏覽器內核之一，同時它也根據本身的須要搞了一些特有的擴展屬性，最經常使用的有：

transform-2d	只用於支持使用 -webkit-transform實現2D變換的瀏覽器
transform-3d	只用於支持使用 -webkit-transform實現3D變換的瀏覽器
transition	只用於支持使用-webkit-transition實現變換效果的瀏覽器
animation	只用於支持使用-webkit-animation實現動畫的瀏覽器

詳情請看這裏：http://webkit.org/specs/MediaQueriesExtensions.html

firefox

firefox也提供一些本身的擴展，不過因爲firefox瀏覽器的手機版如今還很弱，因此不多會用到，感興趣的同窗能夠到https://developer.mozilla.org/En/CSS/Media_queries查閱。

max與min

細心的同窗可能已經注意到前面用到的這兩個關鍵詞，他們是要配合支持它們的屬性使用的，它們的意義與咱們經常使用的max-width和minwidth等相似。

各屬性對max和min的支持在前面的屬性列表中有給出，這裏是一個詳細的列表：

height	min-height	max-height
device-width	min-device-width	max-device-width
device-height	min-device-height	max-device-height
aspect-ratio	min-aspect-ratio	max-aspect-ratio
device-aspect-ratio	min-device-aspect-ratio	max-device-aspect-ratio
color	min-color	max-color
color-index	min-color-index	max-color-index
Monochrome	min-monochrome	max-monochrome
Resolution	min-resolution	max-resolution

not/only

媒體類型還支持 not和only關鍵字，它們能夠用來更方便的定位某個媒體設備：

not：排除某種制定的媒體類型

@media not print and (color){ }

only：指定某種特定的媒體類型，能夠用來排除不支持媒體查詢的瀏覽器：

@media only screen and (color){ }

media query的瀏覽器支持：

• IE 9如下不支持
• Firefox 3.5+(Gecko 1.9.1+)支持
• Opera 9.5+徹底支持
• Opera mini 5支持
• webkit 支持大部分屬性(safari 3.0的內核版本是522，iPhone 1代的safari的內核版本是524，webkit大概從這個時候開始支持media query，可是對部分屬性好比projection支持很差)
• iPhone OS 3.2以前的版本不支持orientation屬性，iPad和iPhone 4支持該屬性。
• iPhone Safari不支持orientation(iPhone 4支持)

實例：

如今讓咱們來看一些典型的例子：

檢測iPhone safari：

<link media="only screen and (max-device-width: 480px)" href="style.css">

這是apple官方網站推薦的一種定位iPhone safari瀏覽器的方法，在iPhone一代和2代的時代，這條規則的確可以正確的判斷出iPhone的瀏覽器，可是後來出現了Android的大屏幕手機，好比Nexus One和HTC desire，這條規則也能適配這些480px寬度的機器。

Google的iPhone橫屏樣式：

Google以前經過如下方式爲iPhone手機提供橫屏樣式(由於最先的3代iPhone手機不支持orientation屬性)：

1 2 3 4 5 6

@media screen and (max-height:300px){ #linksDiv{ margin-top:10px; } ...}

android手機的多分辨率問題：

android系統的開放性致使其終端的多樣性，那麼對於各類各樣的android手機來講，屏幕分辨率的差別致使針對android手機的頁面重構複雜性增長，那麼咱們能夠用media query爲每種分辨率提供特定樣式：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

/* for 240 px width screen */ @media only screen and (max-device-width:240px){ selector{ } }  /* for 360px width screen */ @media only screen and (min-device-width:241px) and (max-device-width:360px){ selector{ } }  /* for 480 px width screen */ @media only screen (min-device-width:361px)and (max-device-width:480px){ selector{ } }

device-aspect-ratio

device-aspect-ratio能夠用來適配特定屏幕長寬比的設備，這也是一個頗有用的屬性，好比，咱們的頁面想要對長寬比爲4:3的普通屏幕定義一種樣式，而後對於16:9和16:10的寬屏，定義另外一種樣式，好比自適應寬度和固定寬度：

1 2 3 4 5 6 7 8 9 10 11

/* for 4:3 screen */ @media only screen and (device-aspect-ratio:4/3){ selector{ } }  /* for 16:9 and 16:10 screen */ @media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){ selector{ } }

固然，對於手機也可使用這個屬性，好比對於480px*800px的Nexus One和Desire等手機，能夠用下面的樣式來匹配：

1 2 3 4 5

/* for 480px*800px width screen */ @media only screen (device-aspect-ratio:5/3){ selector{ } }

O’Reilly區分iPhone和iPad的方法

O’Reilly爲其網站製做了針對iPad和iPhone設備的不一樣版本，從而提供最適合相關設備閱讀的界面，他們的作法就是使用media query：

1 2 3 4

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"> <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">

詳細介紹能夠查看這裏：http://broadcast.oreilly.com/2010/04/using-css-media-queries-ipad.html

總結

CSS 3的media query是一個很強大也很好用的工具，它爲咱們在不一樣的設備和環境下實現豐富的界面提供了一種快捷方法，雖然如今各個瀏覽器對它的支持還有些差別，可是你們都在改進，IE 9已經開始支持media query了。不過目前media query的最大舞臺是在高端手持設備，相信隨着移動互聯網的快速發展，media query也會很好發揮本身的做用。