CSS3增加了Media Queries模塊，使用這個(gè)模塊，網(wǎng)頁制作者只需要針對不同的瀏覽器窗口尺寸來編寫不同的樣式，然后讓瀏覽器根據(jù)不同的窗口尺寸來選擇使用不同的樣式即可。
- 媒體查詢使用方法
@media 設(shè)備類型 and (設(shè)備特性) {樣式代碼}
/* 瀏覽器窗口寬度在1000px以上 */
@media screen and (min-width: 1000px) {
}
/* 瀏覽器窗口寬度在640px以上，999px以下 */
@media screen and (min-width: 640px) and (max-width: 999px) {
}
/* 瀏覽器窗口寬度在640px以下 */
@media screen and (max-width: 640px) {
}
- 10種設(shè)備類型
| 可以指定的值 | 設(shè)備類型 |
|---|---|
| all | 所有設(shè)備 |
| screen | 電腦顯示器 |
| 打印用紙或打印預(yù)覽視圖 | |
| handheld | 便攜設(shè)備 |
| tv | 電視機(jī)類型的設(shè)備 |
| speech | 語音和音頻合成器 |
| braille | 盲人用點(diǎn)字法觸覺回饋設(shè)備 |
| embossed | 盲文打印機(jī) |
| projection | 各種投影設(shè)備 |
| tty | 使用固定密度字母格柵的媒介，比如電傳打字機(jī)和終端 |
- 在iPhone中的顯示
iPhone的分辨率是320px*480px，所以本應(yīng)該符合從上往下排列顯示的，但是真正運(yùn)行時(shí)，瀏覽器中顯示結(jié)果卻為兩欄。
因?yàn)樵趇phone中使用的Safari瀏覽器在進(jìn)行頁面顯示的時(shí)候?qū)⒋翱趯挾茸鳛?80px進(jìn)行顯示的。所以即使在頁面中已經(jīng)寫好了頁面再小尺寸窗口中運(yùn)行的樣式，iPhone中的Safari瀏覽器也不會使用這個(gè)樣式，而是選擇窗口寬度為980px時(shí)所使用的樣式。
我們可以利用<meta>標(biāo)簽在頁面中指定safari瀏覽器在處理本頁面時(shí)按照多少像素的窗口寬度來進(jìn)行：
<meta name="viewport" content="width=600px" />
- not或only關(guān)鍵字
/**
* 對not后面的語句執(zhí)行取反操作
* 樣式代碼將被使用在除便攜設(shè)備之外的其他設(shè)備或非彩色便攜設(shè)備中
*/
@media not handheld and (color) {樣式代碼}
/**
* only關(guān)鍵字，讓那些不支持Media Queries但是能讀取Media Type的設(shè)備瀏覽器，
將表達(dá)式中的樣式隱藏起來
*/
@media only screen and (color) {樣式代碼}
對于支持Media Queries的設(shè)備來說，將能夠正確的應(yīng)用樣式，仿佛only不存在。對于不支持Media Queries但是能夠讀取Meida Type的設(shè)備（譬如IE8只支持“@media screen”）來說，由于先讀取到的是only而不是screen，將忽略這個(gè)樣式。
對于不支持Media Queries的瀏覽器（譬如IE8之前的瀏覽器）來說，無論是否有only，都將忽略這個(gè)樣式。
- 支持對外部樣式表的引用
@import url(color.css) screen and (min-width: 1000px);
<link rel="stylesheet" type="text/css"
media="screen and (min-width:1000px)" href="style.css" />
