標籤：des style blog http java 使用
在 CSS2 中，你可以為不同的媒介裝置（如螢幕、印表機）指定專用的樣式表，而現在藉助 CSS3 的 Media Queries 特性，可以更為有效實現這個功能。你可以為媒介類型添加某些條件，檢測裝置並採用不同的樣式表。例如，你可以把用於大螢幕上顯示的樣式和用於行動裝置的專用樣式放在一個樣式文檔中，這樣，在不改變文檔內容的情況下，不同的裝置可以呈現不同的介面外觀。閱讀這篇文章學習 CSS3 Media Queries 的準系統和國外使用 CSS3 的 Media Queries 特性的優秀網站案例。
CSS3 Media Queries看下這個 線上示範，調整你的瀏覽器視窗尺寸，看看它的變化。
Max Width下面的樣式會在可視地區的寬度小於 600px 的時候被應用。
| 12345 | @media screen and (max-width: 600px) { .class { background: #ccc; }} |
如果你想連結到一個單獨的樣式表，把下面的代碼放在<head>標籤裡。
| 1 | <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> |
下面的樣式會在可視地區的寬度大於 900px 的時候被應用。
| 12345 | @media screen and (min-width: 900px) { .class { background: #666; }} |
你還可以使用過個匹配條件，下面的樣式會在可視地區的寬度在 600px 和 900px 之間的時候被應用。
| 12345 | @media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; }} |
下面的樣式會在 max-device-width 是 480px 的裝置上觸發。（提示：max-device-width 是裝置的實際解析度，而 max-width 指的是可視地區解析度。）
| 12345 | @media screen and (max-device-width: 480px) { .class { background: #000; }} |
下面的樣式是為 iPhone 4 專門寫的 (作者: Thomas Maier)。
| 1 | <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" /> |
你還可以使用 media query 在 iPad 上檢測方向(portrait or landscapse) (作者: Cloud Four)。
| 12 | <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> |
遺憾是的，IE8 及更老版本的瀏覽器不支援 CSS3 Media Queries，不過可以使用 Javascript 彌補，下面是一些解決方案：
附：CSS3 Media Queries 瀏覽器安全色性表
CSS3 Media Queries 應用案例
需要在下面這些支援 Media Queries 特性的瀏覽器中瀏覽：IE9+, Firefox, Chrome 和 Safari。瀏覽每個網站，看頁面配置是如何響應瀏覽器視窗變化的。
Hicksdesign頁面的布局會根據瀏覽器的尺寸在1列，2列和4列之間切換。
A List Apart這個和前面的 Colly 很像，不過這個案例中的圖片也會隨著布局的變化而變化。技巧是使用百分比設定元素的寬度。
總結請記住：為行動裝置最佳化了樣式表並不意味著你的網站就適合在行動裝置顯示了。要做到真正的行動裝置最佳化，要削減映像大小、標籤數量和載入的資源尺寸等等。CSS3 Media Queries 是用於設計的呈現，而不是最佳化。
【參考文章】
* 《What are CSS Media Querie》
* 《WebDesignWall:CSS3 Media Queries》
* 《Can I use CSS3 Media Queries?》
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
