media="screen">
media="screen and (max-width: 800px)">
media="screen and (max-width: 600px)">
并非所有的瀏覽器都支持Media Queries,那么這些瀏覽器怎么看待Media Queries?
Media Queries是CSS3對于Media Type的一個擴展,所以不支持Media Queries的瀏覽器,應(yīng)該仍然要識別Media Type,但是IE只是簡單的忽略了樣式。only 關(guān)鍵字可能顯得有些多余,對支持Media Queries的瀏覽器來說確實是這樣,因為加不加 only 沒有影響。only的作用,很多時候是用來對那些不支持Media Queries但是卻讀取Media Type的設(shè)備隱藏樣式表的。比如:
代碼:
media="only screen and (color)">
支持Media Queries的設(shè)備,正確應(yīng)用樣式,就仿佛only不存在
不支持Media Queries但正確讀取Media Type的設(shè)備,由于先讀取到only而不是screen,將忽略這個樣式
不支持Media Queries的IE不論是否有only,都忽略樣式
最后再來看看 Media Queries 的支持情況。不出意外的,IE678全部出局,但是IE9幸免。根據(jù)IEBlog上的這篇 HTML5 and Same Markup 來看,IE9支持Media Queries。至于其他瀏覽器,同樣不出意外的,全部支持Media Queries。
完整的支持情況羅列成如下表:
其他定義media的方法比如@media等,應(yīng)用Media Queries的方法相同,所以不在重復(fù)敘述。水平有限,如有問題請指出給我,謝謝:)