CSS3中的Media Queries增加了更多的媒體查詢，同時你可以添加不同的媒體類型的表達式用來檢查媒體是否符合某些條件，如果媒體符合相應的條件，那么就會調用對應的樣式表。換句簡單的說，“在CSS3中我們可以設置不同類型的媒體條件，并根據對應的條件，給相應符合條件的媒體調用相對應的樣式表”。現在最常見的一個例子，你可以同時給PC機的大屏幕和移動設備設置不同的樣式表。這功能是非常強大的，他可以讓你定制不同的分辨率和設備，并在不改變內容的情況下，讓你制作的web頁面在不同的分辨率和設備下都能顯示正常，并且不會因此而丟失樣式

首先來看一個簡單的實例

- screen：這個不用說大家都知道，指的是一種媒體類型

- and：被稱為關鍵詞，與其相似的還有not,only

- （max-width:600px）：這個就是媒體特性，說得通俗一點就是媒體條件

1.媒體類型(Media Type)

媒體類型(Media Type)在css2中是一個常見的屬性，也是一個非常有用的屬性，可以通過媒體類型對不同的設備指定不同的樣式，在css2中我們常碰到的就是all（全部）,screen（屏幕）,print（頁面打印或打邱預覽模式）,其實在媒體類型不止這三種，w3c總共列出了10種媒體類型

頁面中引入媒體類型方法也有多種

1.1 link方法引入

1.2 @import方式引入

1.3 @media引入

2.媒體特性（Media Query）

前面有簡單的提到，Media Query是CSS3 對Media Type的增強版，其實可以將Media Query看成Media Type(判斷條件)+CSS(符合條件的樣式規則)

轉換成css中的寫法為

其實就是把small.css文件中的樣式放在了@media srceen and (max-width;600px){…}的大括號之中

常用的media query

3.下面我們一起來看看Media Queries的具體使用方式

3.1最大寬度Max Width

上面表示的是：當屏幕小于或等于600px時，將采用small.css樣式來渲染Web頁面

3.2最小寬度Min Width

上面表示的是：當屏幕大于或等于900px時，將采用big.css樣式來渲染Web頁面

3.3多個Media Queries使用

Media Query可以結合多個媒體查詢，換句話說，一個Media Query可以包含0到多個表達式，表達式又可以包含0到多個關鍵字，以及一種Media Type。正如上面的其表示的是當屏幕在600px-900px之間時采用style.css樣式來渲染web頁面

3.4設備屏幕的輸出寬度Device Width

上面的代碼指的是iphone.css樣式適用于最大設備寬度為480px，比如說iPhone上的顯示，這里的max-device-width所指的是設備的實際分辨率，也就是指可視面積分辨率

3.5iPhone4

上面的樣式是專門針對iPhone4的移動設備寫的

3.6 not關鍵字

not關鍵字是用來排除某種制定的媒體類型，換句話來說就是用于排除符合表達式的設備，比如 @media not print（非打印設備）

3.7 only關鍵字

only用來定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器。其實only很多時候是用來對那些不支持Media Query但卻支持Media Type的設備隱藏樣式表的。其主要有：支持媒體特性（Media Queries）的設備，正常調用樣式，此時就當only不存在；對于不支持媒體特性(Media Queries)但又支持媒體類型(Media Type)的設備，這樣就會不讀了樣式，因為其先讀only而不是screen；另外不支持Media Qqueries的瀏覽器，不論是否支持only，樣式都不會被采用

3.8 在Media Query中如果沒有明確指定Media Type，那么其默認為all

總結

以上是生活随笔為你收集整理的CSS之media Query的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。