再看些其他例子(不準(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://www.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)論。
|