詳解CSS3 Media Queries

網頁製作Webjx文章簡介：說起CSS3的新特性，就不得不提到 Media Queries 。 本文比較詳細，所以很多實際中用不到。所以如果只是想簡單瞭解Media Queries，推薦參考 CSS3 Media Queries 。 CSS2.1定義了 Media 的部分，包括類型、組別和規則等。CSS並非為了顯示器而創造，而是應用於各種各樣的

　　說起CSS3的新特性，就不得不提到 Media Queries 。

　　本文比較詳細，所以很多實際中用不到。所以如果只是想簡單瞭解Media Queries，推薦參考 CSS3 Media Queries 。

　　CSS2.1定義了 Media 的部分，包括類型、組別和規則等。CSS並非為了顯示器而創造，而是應用於各種各樣的媒體，比如常見的顯示器，越來愈多的手持功能，可能略顯過時的電視機等等。

　　而 Media Queries 的引入，其作用就是允許添加運算式用以確定媒體的情況，以此來應用不同的樣式表。換句話說，其允許我們在不改變內容的情況下，改變頁面的布局以精確適應不同的裝置，以此加強體驗。所以Media Queries和CSS最佳化沒有關係，甚至是矛盾的。

　　引用CSS3 Media Queries裡的直觀的 DEMO，當瀏覽器寬度改變時，應用的CSS發生變化。而這些，原本需要 JavaScript 的控制才能做到。

　　Web移動化的趨勢越加明顯。雖然國內受到很多制約，但是這種浪潮卻無法阻擋。前段時間jQuery宣布mobile項目，也加速了這種變化。Media Queries 不久的將來應該就會被更多的使用，以更好的支援新興裝置比如iPad。事實上， jQuery 甚至有 Media Queries的外掛程式。

　　看看 Media Queries 做了什麼

　　

　　一個三欄布局，在螢幕變窄的情況下，變成1欄布局，甚至是消除多餘兩欄而只留下通常的內容的第2欄。Media Queries是如何工作的?先看看 link 標籤的寫法：

　　代碼：

　　

　　在media屬性裡：

　　screen 是媒體類型裡的一種，CSS2.1定義了10種媒體類型

　　and 被稱為關鍵字，其他關鍵字還包括 not(排除某種裝置)，only(限定某種裝置)

　　(min-width： 400px) 就是媒體特性，其被放置在一對圓括弧中。完整的特性參看 相關的Media features部分

　　媒體特性共13種，可以說是一個類似CSS屬性的集合。但和CSS屬性不同的是，媒體特性只接受單個的邏輯運算式作為其值，或者沒有值。並且其中的大部分接受 min/max 的首碼，用來表示 大於等於/小於等於 的邏輯，以此避免使用 < 和 > 這些字元。

　　

　　那麼，回到剛才的那條Media Query，media="screen and (min-width: 400px)" 的意思就是當螢幕的寬度大於等於400px的時候，應用此條CSS。

[1] [2]  下一頁