亚洲AV无码乱码在线观看不卡|最新大伊香蕉精品视频在线|亚洲不卡av一区二区|国产美女无遮挡免费

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

　　本文比較詳細(xì)，所以很多實(shí)際中用不到。所以如果只是想簡(jiǎn)單了解Media Queries，推薦參考 CSS3 Media Queries 。

　　CSS2.1定義了 Media 的部分，包括類型、組別和規(guī)則等。CSS并非為了顯示器而創(chuàng)造，而是應(yīng)用于各種各樣的媒體，比如常見(jiàn)的顯示器，越來(lái)愈多的手持設(shè)備，可能略顯過(guò)時(shí)的電視機(jī)等等。

　　而 Media Queries 的引入，其作用就是允許添加表達(dá)式用以確定媒體的情況，以此來(lái)應(yīng)用不同的樣式表。換句話說(shuō)，其允許我們?cè)诓桓淖儍?nèi)容的情況下，改變頁(yè)面的布局以精確適應(yīng)不同的設(shè)備，以此加強(qiáng)體驗(yàn)。所以Media Queries和CSS優(yōu)化沒(méi)有關(guān)系，甚至是矛盾的。

　　引用CSS3 Media Queries里的直觀的 DEMO，當(dāng)瀏覽器寬度改變時(shí)，應(yīng)用的CSS發(fā)生變化。而這些，原本需要 JavaScript 的控制才能做到。

　　Web移動(dòng)化的趨勢(shì)越加明顯。雖然國(guó)內(nèi)受到很多制約，但是這種浪潮卻無(wú)法阻擋。前段時(shí)間jQuery宣布mobile項(xiàng)目，也加速了這種變化。Media Queries 不久的將來(lái)應(yīng)該就會(huì)被更多的使用，以更好的支持新興設(shè)備比如iPad。事實(shí)上， jQuery 甚至有 Media Queries的插件。

　　看看 Media Queries 做了什么

　　一個(gè)三欄布局，在屏幕變窄的情況下，變成1欄布局，甚至是消除多余兩欄而只留下通常的內(nèi)容的第2欄。Media Queries是如何工作的?先看看 link 標(biāo)簽的寫法：

　　代碼:

　　在media屬性里：

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

　　and 被稱為關(guān)鍵字，其他關(guān)鍵字還包括 not(排除某種設(shè)備)，only(限定某種設(shè)備)

　　(min-width: 400px) 就是媒體特性，其被放置在一對(duì)圓括號(hào)中。完整的特性參看 相關(guān)的Media features部分

　　媒體特性共13種，可以說(shuō)是一個(gè)類似CSS屬性的集合。但和CSS屬性不同的是，媒體特性只接受單個(gè)的邏輯表達(dá)式作為其值，或者沒(méi)有值。并且其中的大部分接受 min/max 的前綴，用來(lái)表示 大于等于/小于等于 的邏輯，以此避免使用 < 和 > 這些字符。

　　那么，回到剛才的那條 Media Query，media="screen and (min-width: 400px)" 的意思就是當(dāng)屏幕的寬度大于等于400px的時(shí)候，應(yīng)用此條CSS。

　　一個(gè) Media Query 包含一種媒體類型，如果媒體類型沒(méi)有指定，那么就是默認(rèn)類型all，比如：

　　代碼:

　　media="(max-width: 600px)">

　　一個(gè) Media Query 包含0到多個(gè)表達(dá)式，表達(dá)式又包含0到多個(gè)關(guān)鍵字，以及一種媒體特性，比如：

　　代碼:

　　media="handheld and (min-width:20em) and (max-width:50em)">

　　逗號(hào)(,)被用來(lái)表示并列，表示或者。比如下面的例子表示此CSS被應(yīng)用于寬度小于20em的手持，或者寬度小于30em的屏幕：

　　代碼:

　　media="handheld and (max-width:20em), screen and (max-width:30em)">

　　not 關(guān)鍵字用來(lái)排除符合表達(dá)式的設(shè)備，比如：

　　代碼:

　　media="not screen and (color)">

　　再看些其他例子(不準(zhǔn)確，只是用來(lái)說(shuō)明)：

　　代碼:

　　media="screen and (min-width: 800px)">

　　media="screen and (min-width: 600px) and (max-width: 800px)">

　　media="screen and (max-width: 600px)">

　　上面將設(shè)備分成3種，分別是寬度大于800px時(shí)，應(yīng)用styleA，寬度在600px到800px之間時(shí)應(yīng)用styleB，以及寬度小于600px時(shí)應(yīng)用styleC。這其實(shí)是一個(gè)CSS覆蓋的問(wèn)題，所以當(dāng)寬度正好等于800px時(shí)該應(yīng)用那個(gè)樣式?答案是styleB，因?yàn)榍皟蓷l表達(dá)式都成立，后者覆蓋了前者。

　　所以說(shuō)上面的例子雖然能工作，但是不準(zhǔn)確。這個(gè)例子正常情況應(yīng)該這樣寫：

　　代碼: