|
說起CSS3的新特性，就不得不提到 Media Queries 。
本文比較詳細(xì)，所以很多實(shí)際中用不到。所以如果只是想簡(jiǎn)單了解Media Queries，推薦參考 CSS3 Media Queries 。
CSS2.1定義了 Media 的部分，包括類型、組別和規(guī)則等。CSS并非為了顯示器而創(chuàng)造，而是應(yīng)用于各種各樣的媒體，比如常見的顯示器，越來愈多的手持設(shè)備，可能略顯過時(shí)的電視機(jī)等等。
而 Media Queries 的引入，其作用就是允許添加表達(dá)式用以確定媒體的情況，以此來應(yīng)用不同的樣式表。換句話說，其允許我們?cè)诓桓淖儍?nèi)容的情況下，改變頁(yè)面的布局以精確適應(yīng)不同的設(shè)備，以此加強(qiáng)體驗(yàn)。所以Media Queries和CSS優(yōu)化沒有關(guān)系，甚至是矛盾的。
引用CSS3 Media Queries里的直觀的 DEMO，當(dāng)瀏覽器寬度改變時(shí)，應(yīng)用的CSS發(fā)生變化。而這些，原本需要 JavaScript 的控制才能做到。
Web移動(dòng)化的趨勢(shì)越加明顯。雖然國(guó)內(nèi)受到很多制約，但是這種浪潮卻無法阻擋。前段時(shí)間jQuery宣布mobile項(xiàng)目，也加速了這種變化。Media Queries 不久的將來應(yīng)該就會(huì)被更多的使用，以更好的支持新興設(shè)備比如iPad。事實(shí)上， jQuery 甚至有 Media Queries的插件。
看看 Media Queries 做了什么
一個(gè)三欄布局，在屏幕變窄的情況下，變成1欄布局，甚至是消除多余兩欄而只留下通常的內(nèi)容的第2欄。Media Queries是如何工作的？先看看 link 標(biāo)簽的寫法：
代碼:
<link rel="stylesheet" type="text/css" href="swordair.css" media="screen and (min-width: 400px)">
在media屬性里：
- screen 是媒體類型里的一種，CSS2.1定義了10種媒體類型
- and 被稱為關(guān)鍵字，其他關(guān)鍵字還包括 not(排除某種設(shè)備)，only(限定某種設(shè)備)
- (min-width: 400px) 就是媒體特性，其被放置在一對(duì)圓括號(hào)中。完整的特性參看 相關(guān)的Media features部分
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) CSS3 Media Queries 詳解 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) CSS3 Media Queries 詳解 [1]
第 2 頁(yè) 
