media query(媒體查詢)和media type(媒體類型)

網頁製作Webjx文章簡介：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：

方法一

<linkhref="style.css"media="screen print" ...

方法二

<?xml-stylesheetmedia="screen"href="style.css"...

方法三

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

方法四

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

方法五

123	@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屬性的名稱，也可以是屬性+值：

<linkrel="stylesheet"media="screen and (animation)” herf=“…”

如果裝置支援CSS動畫，那麼就能執行這個外部樣式表檔案。

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

如果裝置的瀏覽器的最大寬度是240px，則頁面將使用中號字型。

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

媒體查詢語句結構

我們可以將上述語句稱為媒體查詢語句，這樣也更能理解一些。從上面的例子也可以看出，媒體查詢語句一般由media type+一到多個CSS屬性判斷組成，而多個CSS屬性判斷可以用關鍵字and串連：

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

其中media type可以省略，屬性值也可以為空白：

@media (color:4){}

@media (color){}

當然，請注意，有屬性值和沒有屬性值的情況代表的意義是不一樣的，所以上面的這兩條規則不是等價的。

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

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

123	@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：

<linkmedia="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屬性)：

123456

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

android手機的多解析度問題：

android系統的開放性導致其終端的多樣性，那麼對於各種各樣的android手機來說，螢幕解析度的差異導致針對android手機的頁面重構複雜性增加，那麼我們可以用media query為每種解析度提供特定樣式：

1234567891011121314151617

/* 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的寬屏，定義另一種樣式，比如自適應寬度和固定寬度：

1234567891011

/* 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等手機，可以用下面的樣式來匹配：

12345

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

O’Reilly區分iPhone和iPad的方法

O’Reilly為其網站製作了針對iPad和iPhone裝置的不同版本，從而提供最適合相關裝置閱讀的介面，他們的做法就是使用media query：

1234

<linkrel="stylesheet"media="all and (max-device-width: 480px)"href="iphone.css"><linkrel="stylesheet"media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)"href="ipad-portrait.css"><linkrel="stylesheet"media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)"href="ipad-landscape.css"><linkrel="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也會很好發揮自己的作用。