子標題：CSS3 Media Queries 詳解 - 下
一個 Media Query 包含一種媒體類型，如果媒體類型沒有指定，那麼就是默認類型 all，比如：
一個 Media Query 包含0到多個表達式，表達式又包含0到多個關鍵字，以及一種媒體特性，比如：
逗號(,)被用來表示並列，表示或者。比如下面的例子表示此 CSS 被應用於寬度小於20em的手持，或者寬度小於30em的屏幕：
not 關鍵字用來排除符合表達式的設備，比如：
再看些其他例子(不準確，只是用來說明)：
上面將設備分成3種，分別是寬度大於800px時，應用 styleA，寬度在600px到800px之間時應用 styleB，以及寬度小於600px時應用 styleC。這其實是一個 CSS 覆蓋的問題，所以當寬度正好等於800px時該應用那個樣式？答案是 styleB，因為前兩條表達式都成立，後者覆蓋了前者。
所以說上面的例子雖然能工作，但是不準確。這個例子正常情況應該這樣寫：
並非所有的瀏覽器都支持 Media Queries，那麼這些瀏覽器怎麼看待 Media Queries？
Media Queries 是 CSS3 對於 Media Type 的一個擴展，所以不支持 Media Queries 的瀏覽器，應該仍然要識別 Media Type，但是 IE 只是簡單的忽略了樣式。only 關鍵字可能顯得有些多餘，對支持 Media Queries 的瀏覽器來說確實是這樣，因為加不加 only 沒有影響。only 的作用，很多時候是用來對那些不支持 Media Queries 但是卻讀取 Media Type 的設備隱藏樣式表的。比如：
‧支持 Media Queries 的設備，正確應用樣式，就仿佛 only 不存在
‧不支持 Media Queries 但正確讀取 Media Type 的設備，由於先讀取到 only 而不是 screen，將忽略這個樣式
‧不支持 Media Queries 的 IE 不論是否有 only，都忽略樣式
最後再來看看 Media Queries 的支持情況。不出意外的，IE 6 7 8 全部出局，但是 IE9 幸免。根據 IE Blog 上的這篇 HTML5 and Same Markup 來看，IE9 支持 Media Queries。至於其他瀏覽器，同樣不出意外的，全部支持 Media Queries。
完整的支持情況羅列成如下表：
其他定義 media 的方法比如 @media 等，應用 Media Queries 的方法相同，所以不再重複敘述。水平有限，如有問題請指出給我，謝謝:)
<link rel="stylesheet" type="text/css" href="example.css" media="(max-width: 600px)">
一個 Media Query 包含0到多個表達式，表達式又包含0到多個關鍵字，以及一種媒體特性，比如：
<link rel="stylesheet" type="text/css" href="example.css" media="handheld and (min-width:20em) and (max-width:50em)">
逗號(,)被用來表示並列，表示或者。比如下面的例子表示此 CSS 被應用於寬度小於20em的手持，或者寬度小於30em的屏幕：
<link rel="stylesheet" type="text/css" href="example.css" media="handheld and (max-width:20em), screen and (max-width:30em)">
not 關鍵字用來排除符合表達式的設備，比如：
<link rel="stylesheet" type="text/css" href="example.css" media="not screen and (color)">
再看些其他例子(不準確，只是用來說明)：
<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)">
上面將設備分成3種，分別是寬度大於800px時，應用 styleA，寬度在600px到800px之間時應用 styleB，以及寬度小於600px時應用 styleC。這其實是一個 CSS 覆蓋的問題，所以當寬度正好等於800px時該應用那個樣式？答案是 styleB，因為前兩條表達式都成立，後者覆蓋了前者。
所以說上面的例子雖然能工作，但是不準確。這個例子正常情況應該這樣寫：
<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 對於 Media Type 的一個擴展，所以不支持 Media Queries 的瀏覽器，應該仍然要識別 Media Type，但是 IE 只是簡單的忽略了樣式。only 關鍵字可能顯得有些多餘，對支持 Media Queries 的瀏覽器來說確實是這樣，因為加不加 only 沒有影響。only 的作用，很多時候是用來對那些不支持 Media Queries 但是卻讀取 Media Type 的設備隱藏樣式表的。比如：
<link rel="stylesheet" type="text/css" href="example.css" media="only screen and (color)">
‧支持 Media Queries 的設備，正確應用樣式，就仿佛 only 不存在
‧不支持 Media Queries 但正確讀取 Media Type 的設備，由於先讀取到 only 而不是 screen，將忽略這個樣式
‧不支持 Media Queries 的 IE 不論是否有 only，都忽略樣式
最後再來看看 Media Queries 的支持情況。不出意外的，IE 6 7 8 全部出局，但是 IE9 幸免。根據 IE Blog 上的這篇 HTML5 and Same Markup 來看，IE9 支持 Media Queries。至於其他瀏覽器，同樣不出意外的，全部支持 Media Queries。
完整的支持情況羅列成如下表：
其他定義 media 的方法比如 @media 等，應用 Media Queries 的方法相同，所以不再重複敘述。水平有限，如有問題請指出給我，謝謝:)
