DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> media query(媒體查詢)和media type(媒體類型)
media query(媒體查詢)和media type(媒體類型)
編輯:CSS進階教程     

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也會很好發揮自己的作用。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved