CSS3 Media Queries 詳解

來源:互聯網
上載者:User

說起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。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.