了解完這些概念性的東西，同學們最想知道的是media queries要如何使用？下面我們一起來**其使用方法：
media queries能在不同的條件下使用不同的樣式，使頁面在不同在終端裝置下達到不同的渲染效果。前面簡單的介紹了media queries如何引用到專案中，但media queries有其自己的使用規則。具體來說,media queries的使用方法如下。
@media **型別and （**特性）
注意：使用media queries必須要使用「@media」開頭，然後指定**型別（也可以稱為裝置型別），隨後是指定**特性（也可以稱之為裝置特性）。**特性的書寫方式和樣式的書寫方式非常相似，主要分為兩個部分，第乙個部分指的是**特性，第二部分為**特性所指定的值，而且這兩個部分之間使用冒號分隔。例如：
最大寬度max-width
「max-width」是**特性中最常用的乙個特性，其意思是指**型別小於或等於指定的寬度時，樣式生效。如：
@media screen and (max-width:480px)
}上面表示的是：當螢幕小於或等於480px時,頁面中的廣告區塊（.ads）都將被隱藏。
2.最小寬度min-width
「min-width」與「max-width」相反，指的是**型別大於或等於指定寬度時，樣式生效。
當螢幕在600px~900px之間時，body的背景色渲染為「#f5f5f5」，如下所示。
@media screen and (min-width:600px) and (max-width:900px)
}4.裝置螢幕的輸出寬度device width
在智慧型裝置上，例如iphone、ipad等，還可以根據螢幕裝置的尺寸來設定相應的樣式（或者呼叫相應的樣式檔案）。同樣的，對於螢幕裝置同樣可以使用「min/max」對應引數，如「min-device-width」或者「max-device-width」。
上面的**指的是「iphone.css」樣式適用於最大裝置寬度為480px，比如說iphone上的顯示，這裡的「max-device-width」所指的是裝置的實際解析度，也就是指可視面積解析度。
@media not print and (max-width: 1200px)
上面**表示的是：樣式**將被使用在除列印裝置和裝置寬度小於1200px下所有裝置中。
在media query中如果沒有明確指定media type，那麼其預設為all，如：
另外在樣式中，還可以使用多條語句來將同乙個樣式應用於不同的**型別和**特性中，指定方式如下所示。
上面**中style.css樣式被用在寬度小於或等於480px的手持裝置上，或者被用於螢幕寬度大於或等於960px的裝置上。
到目前為止，css3 media queries得到了眾多瀏覽器支援，除了ie6-8瀏覽器不支援之外，在所有現代瀏覽器中都可以完美支援。還有乙個與眾不同的時，media queries在其他瀏覽器中不要像其他css3屬性一樣在不同的瀏覽器中新增字首。
Media Queries語法總結
media queries的語法如下所示 media media query media type and media feature 使用media queries樣式模組時都必須以 media 方式開頭。media query表示查詢關鍵字，在這裡可以使用not關鍵字和only關鍵字。not關鍵...
Media Queries語法總結
media queries 的語法如下所示 media media query media type and media feature 使用media queries 樣式模組時都必須以 media 方式開頭。media query 表示查詢關鍵字，在這裡可以使用 not關鍵字和 only 關鍵字...
Media Queries移動裝置樣式
本節我們將為你帶來一種全新的樣式技術。通過media queries樣式模組，可以實現根據移動裝置的螢幕大小，定製 頁面的不同布局效果。它的優點是開發者只需要實現一套頁面，就能夠在所有平台的瀏覽器下訪問 的不同效果。在開始介紹media queries知識之前，先來看看乙個傳統的 在各種移動裝置上的...