下面的樣式會在可視區域的寬度小于 600px 的時候被應用。
如果你想連結到一個單獨的樣式表，把下面的代碼放在<head>标簽裡。
下面的樣式會在可視區域的寬度大于 900px 的時候被應用。
你還可以使用過個比對條件，下面的樣式會在可視區域的寬度在 600px 和 900px 之間的時候被應用。
下面的樣式會在 max-device-width 是 480px 的裝置上觸發。（提示：max-device-width 是裝置的實際分辨率，而 max-width 指的是可視區域分辨率。）
遺憾是的，IE8 及更老版本的浏覽器不支援 CSS3 Media Queries，不過可以使用 Javascript 彌補，下面是一些解決方案：
<a href="http://css-tricks.com/resolution-specific-stylesheets/" target="_blank">CSS Tricks - using jQuery to detect browser size</a>
<a href="http://www.themaninblue.com/experiment/ResolutionLayout/" target="_blank">The Man in Blue - using Javascript</a>
<a href="http://plugins.jquery.com/project/MediaQueries" target="_blank">jQuery Media Queries Plugin</a>
附：CSS3 Media Queries 浏覽器相容性表
需要在下面這些支援 Media Queries 特性的浏覽器中浏覽：IE9+, Firefox, Chrome 和 Safari。浏覽每個站點，看頁面布局是如何響應浏覽器視窗變化的。
大尺寸: 3 列側欄
較小尺寸: 2 清單側欄 (中間一列下降到左邊的列)
更小尺寸: 1 列側欄 (右列上移到标志下方)
最小尺寸: 沒有側欄 (LOGO及右列上移，其他側邊欄列移到底部)
頁面的布局會根據浏覽器的尺寸在1列，2列和4列之間切換。
大尺寸: 導航在頂部，圖檔隻有一行。
中等尺寸: 導航在左邊，圖檔變成3列。
小尺寸: 導航在頂部，LOGO沒有了背景圖檔，圖檔變成3列。
這個和前面的 Colly 很像，不過這個案例中的圖檔也會随着布局的變化而變化。技巧是使用百分比設定元素的寬度。
請記住：為移動裝置優化了樣式表并不意味着你的網站就适合在移動裝置顯示了。要做到真正的移動裝置優化，要削減圖像大小、标簽數量和加載的資源尺寸等等。CSS3 Media Queries 是用于設計的呈現，而不是優化。
【參考文章】
<a href="http://www.cnblogs.com/lhb25/archive/2012/03/05/few-new-collections-css3-effects.html" target="_blank">20個非常絢麗的 CSS3 特性應用示範</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/07/25/23-popular-logos-built-purely-with-css3.html" target="_blank">23個純 CSS3 打造的精美LOGO圖案</a>
<a href="http://www.cnblogs.com/lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html" target="_blank">35個讓人驚訝的 CSS3 動畫效果示範</a>
<a href="http://www.cnblogs.com/lhb25/archive/2011/05/12/2020284.html" target="_blank">推薦12個漂亮的 CSS3 按鈕實作方案</a>
<a href="http://www.cnblogs.com/lhb25/archive/2011/03/09/1964344.html" target="_blank">24款非常實用的 CSS3 工具終極收藏</a>
歡迎任何形式的轉載，但請務必注明出處。