CSS3學習教程:Media Queries

文章簡介：本文比較詳細，所以很多實際中用不到。所以如果只是想簡單瞭解Media Queries，推薦參考 CSS3 Media Queries 。

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

本文比較詳細，所以很多實際中用不到。所以如果只是想簡單瞭解Media Queries，推薦參考 CSS3 Media Queries 。

CSS2.1定義了 Media 的部分，包括類型、組別和規則等。CSS並非為了顯示器而創造，而是應用於各種各樣的媒體，比如常見的顯示器，越來愈多的手持功能，可能略顯過時的電視機等等。

而 Media Queries 的引入，其作用就是允許添加運算式用以確定媒體的情況，以此來應用不同的樣式表。換句話說，其允許我們在不改變內容的情況下，改變頁面的布局以精確適應不同的裝置，以此加強體驗。所以Media Queries和CSS最佳化沒有關係，甚至是矛盾的。

引用CSS3 Media Queries裡的直觀的 DEMO，當瀏覽器寬度改變時，應用的CSS發生變化。而這些，原本需要 JavaScript 的控制才能做到。

Web移動化的趨勢越加明顯。雖然國內受到很多制約，但是這種浪潮卻無法阻擋。前段時間jQuery宣布mobile項目，也加速了這種變化。Media Queries 不久的將來應該就會被更多的使用，以更好的支援新興裝置比如iPad。事實上， jQuery 甚至有 Media Queries的外掛程式。

看看 Media Queries 做了什麼



一個三欄布局，在螢幕變窄的情況下，變成1欄布局，甚至是消除多餘兩欄而只留下通常的內容的第2欄。Media Queries是如何工作的？先看看 link 標籤的寫法：

1. <link rel="stylesheet" type="text/css" href="swordair.css" media="screen and (min-width: 400px)"

在media屬性裡：

• 
  

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

• and 被稱為關鍵字，其他關鍵字還包括 not(排除某種裝置)，only(限定某種裝置)
  

• (min-width: 400px) 就是媒體特性，其被放置在一對圓括弧中。完整的特性參看 相關的Media features部分
  

媒體特性共13種，可以說是一個類似CSS屬性的集合。但和CSS屬性不同的是，媒體特性只接受單個的邏輯運算式作為其值，或者沒有值。並且其中的大部分接受 min/max 的首碼，用來表示 大於等於/小於等於 的邏輯，以此避免使用 < 和 > 這些字元。



那麼，回到剛才的那條 Media Query，media="screen and (min-width: 400px)" 的意思就是當螢幕的寬度大於等於400px的時候，應用此條CSS。

一個 Media Query 包含一種媒體類型，如果媒體類型沒有指定，那麼就是預設類型all，比如：

1. <link rel="stylesheet" type="text/css" href="example.css"
   

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

一個 Media Query 包含0到多個運算式，運算式又包含0到多個關鍵字，以及一種媒體特性，比如：

1. <link rel="stylesheet" type="text/css" href="example.css"
   

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

複製代碼

逗號(,)被用來表示並列，表示或者。比如下面的例子表示此CSS被應用於寬度小於20em的手持，或者寬度小於30em的螢幕：

1. <link rel="stylesheet" type="text/css" href="example.css"
   

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

not 關鍵字用來排除符合運算式的裝置，比如：

1. <link rel="stylesheet" type="text/css" href="example.css"
   

2. media="not screen and (color)">

再看些其他例子(不準確，只是用來說明)：

1. <link rel="stylesheet" type="text/css" href="styleA.css"
   

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

3. 
   

4. <link rel="stylesheet" type="text/css" href="styleB.css"
   

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

6. 
   

7. <link rel="stylesheet" type="text/css" href="styleC.css"
   

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

上面將裝置分成3種，分別是寬度大於800px時，應用styleA，寬度在600px到800px之間時應用styleB，以及寬度小於600px時應用styleC。這其實是一個CSS覆蓋的問題，所以當寬度正好等於800px時該應用那個樣式？答案是styleB，因為前兩條運算式都成立，後者覆蓋了前者。

所以說上面的例子雖然能工作，但是不準確。這個例子正常情況應該這樣寫：

1. <link rel="stylesheet" type="text/css" href="styleA.css"
   

2. media="screen">
   

3. 
   

4. <link rel="stylesheet" type="text/css" href="styleB.css"
   

5. media="screen and (max-width: 800px)">
   

6. 
   

7. <link rel="stylesheet" type="text/css" href="styleC.css"
   

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

並非所有的瀏覽器都支援Media Queries，那麼這些瀏覽器怎麼看待Media Queries？

Media Queries是CSS3對於Media Type的一個擴充，所以不支援Media Queries的瀏覽器，應該仍然要識別Media Type，但是IE只是簡單的忽略了樣式。 only 關鍵字可能顯得有些多餘，對支援Media Queries的瀏覽器來說確實是這樣，因為加不加 only 沒有影響。only的作用，很多時候是用來對那些不支援Media Queries但是卻讀取Media Type的裝置隱藏樣式表的。比如：

1. <link rel="stylesheet" type="text/css" href="example.css"
   

2. media="only screen and (color)">

• 
  

• 支援Media Queries的裝置，正確應用樣式，就彷彿only不存在
  

• 不支援Media Queries但正確讀取Media Type的裝置，由於先讀取到only而不是screen，將忽略這個樣式
  

• 不支援Media Queries的IE不論是否有only，都忽略樣式
  

最後再來看看 Media Queries 的支援情況。不出意外的，IE678全部出局，但是IE9倖免。根據IEBlog上的這篇 HTML5 and Same Markup 來看，IE9支援Media Queries。至於其他瀏覽器，同樣不出意外的，全部支援Media Queries。

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



其他定義media的方法比如@media等，應用Media Queries的方法相同，所以不在重複敘述。水平有限，如有問題請指出給我，謝謝:)