在 CSS2 中，你可以爲不同的媒介設備（如屏幕、打印機）指定專用的樣式表，而現在藉助 CSS3 的 Media Queries 特性，可以更爲有效的實現這個功能。你可以爲媒介類型添加某些條件，檢測設備並採用不同的樣式表。
例如，你可以把用於大屏幕上顯示的樣式和用於移動設備的專用樣式放在一個樣式文檔中，這樣，在不改變文檔內容的情況下，不同的設備可以呈現不同的界面外觀。閱讀這篇文章學習 CSS3 Media Queries 的基本功能和國外使用 CSS3 的 Media Queries 特性的優秀網站案例。
CSS3 Media Queries
看下這個 在線演示，調整你的瀏覽器窗口尺寸，看看它的變化。
Max Width
下面的樣式會在可視區域的寬度小於 600px 的時候被應用。
|
1
2
3
4
5
|
@mediascreen and
(max-width:600px)
{ .class
{ background:#ccc; }} |
如果你想鏈接到一個單獨的樣式表，把下面的代碼放在<head>標籤裏。
|
1
|
<link
rel="stylesheet" media="screen
and (max-width: 600px)" href="small.css" /> |
Min Width
下面的樣式會在可視區域的寬度大於 900px 的時候被應用。
|
1
2
3
4
5
|
@mediascreen and
(min-width:900px)
{ .class
{ background:#666; }} |
Multiple Media Queries
你還可以使用過個匹配條件，下面的樣式會在可視區域的寬度在 600px 和 900px 之間的時候被應用。
|
1
2
3
4
5
|
@mediascreen and
(min-width:600px)
and (max-width:900px)
{ .class
{ background:#333; }} |
Device Width
下面的樣式會在 max-device-width 是 480px 的設備上觸發。（提示：max-device-width 是設備的實際分辨率，而 max-width 指的是可視區域分辨率。）
|
1
2
3
4
5
|
@mediascreen and
(max-device-width:480px)
{ .class
{ background:#000; }} |
For iPhone 4
下面的樣式是爲 iPhone 4 專門寫的 (作者: Thomas Maier)。
|
1
|
<link
rel="stylesheet" media="only
screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" /> |
For iPad
你還可以使用 media query 在 iPad 上檢測方向(portrait or landscapse) (作者: Cloud Four)。
|
1
2
|
<link
rel="stylesheet" media="all
and (orientation:portrait)" href="portrait.css"><link
rel="stylesheet" media="all
and (orientation:landscape)" href="landscape.css"> |
Media Queries for IE
遺憾是的，IE8 及更老版本的瀏覽器不支持 CSS3 Media Queries，不過可以使用 Javascript 彌補，下面是一些解決方案：
- CSS Tricks - using jQuery to detect browser size
- The Man in Blue - using Javascript
- jQuery Media Queries Plugin
附：CSS3 Media Queries 瀏覽器兼容性表
CSS3 Media Queries 應用案例
需要在下面這些支持 Media Queries 特性的瀏覽器中瀏覽：IE9+, Firefox, Chrome 和 Safari。瀏覽每個站點，看頁面佈局是如何響應瀏覽器窗口變化的。
Hicksdesign
- 大尺寸: 3 列側欄
- 較小尺寸: 2 列表側欄 (中間一列下降到左邊的列)
- 更小尺寸: 1 列側欄 (右列上移到標誌下方)
- 最小尺寸: 沒有側欄 (LOGO及右列上移，其他側邊欄列移到底部)
Colly
頁面的佈局會根據瀏覽器的尺寸在1列，2列和4列之間切換。
A List Apart
- 大尺寸: 導航在頂部，圖片只有一行。
- 中等尺寸: 導航在左邊，圖片變成3列。
- 小尺寸: 導航在頂部，LOGO沒有了背景圖片，圖片變成3列。
Tee Gallery
這個和前面的 Colly 很像，不過這個案例中的圖片也會隨着佈局的變化而變化。技巧是使用百分比設置元素的寬度。
總結
請記住：爲移動設備優化了樣式表並不意味着你的網站就適合在移動設備顯示了。要做到真正的移動設備優化，要削減圖像大小、標籤數量和加載的資源尺寸等等。CSS3 Media Queries 是用於設計的呈現，而不是優化。