CSS3 Media Queries 詳解 - 上

點閱:3380 平均評分:10.00 (1票) 迴響:0
作者:iifksp 來源:藍色理想:http://www.blueidea.com/tech/web/2010/7912.asp
  說起 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 標籤的寫法:

<link rel="stylesheet" type="text/css" href="swordair.css" media="screen and (min-width: 400px)">


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。

相關

相關專題
CSS 3