中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

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

代碼:

<link rel="stylesheet" type="text/css" href="styleA.css"
    media="screen and (min-width: 800px)">
<link rel="stylesheet" type="text/css" href="styleB.css"
    media="screen and (min-width: 600px) and (max-width: 800px)">
<link rel="stylesheet" type="text/css" href="styleC.css"
    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)該這樣寫：

代碼:

<link rel="stylesheet" type="text/css" href="styleA.css"
    media="screen">
<link rel="stylesheet" type="text/css" href="styleB.css"
    media="screen and (max-width: 800px)">
<link rel="stylesheet" type="text/css" href="styleC.css"
    media="screen and (max-width: 600px)">

并非所有的瀏覽器都支持Media Queries，那么這些瀏覽器怎么看待Media Queries？

Media Queries是CSS3對(duì)于Media Type的一個(gè)擴(kuò)展，所以不支持Media Queries的瀏覽器，應(yīng)該仍然要識(shí)別Media Type，但是IE只是簡(jiǎn)單的忽略了樣式。only 關(guān)鍵字可能顯得有些多余，對(duì)支持Media Queries的瀏覽器來(lái)說(shuō)確實(shí)是這樣，因?yàn)榧硬患?only 沒(méi)有影響。only的作用，很多時(shí)候是用來(lái)對(duì)那些不支持Media Queries但是卻讀取Media Type的設(shè)備隱藏樣式表的。比如：

代碼:

<link rel="stylesheet" type="text/css" href="example.css"
    media="only screen and (color)">

• 支持Media Queries的設(shè)備，正確應(yīng)用樣式，就仿佛only不存在
• 不支持Media Queries但正確讀取Media Type的設(shè)備，由于先讀取到only而不是screen，將忽略這個(gè)樣式
• 不支持Media Queries的IE不論是否有only，都忽略樣式

最后再來(lái)看看 Media Queries 的支持情況。不出意外的，IE678全部出局，但是IE9幸免。根據(jù)IEBlog上的這篇 HTML5 and Same Markup 來(lái)看，IE9支持Media Queries。至于其他瀏覽器，同樣不出意外的，全部支持Media Queries。

完整的支持情況羅列成如下表：

其他定義media的方法比如@media等，應(yīng)用Media Queries的方法相同，所以不在重復(fù)敘述。水平有限，如有問(wèn)題請(qǐng)指出給我，謝謝:)

經(jīng)典論壇交流：http://bbs.blueidea.com/thread-2996434-1-1.html

本文鏈接：http://m.95time.cn/tech/web/2010/7912.asp　

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁(yè) CSS3 Media Queries 詳解 [2] 下一頁(yè)

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。