CSS3增加了Media Queries模塊，使用這個模塊琅绅，網(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 | 電視機類型的設(shè)備 |
| speech | 語音和音頻合成器 |
| braille | 盲人用點字法觸覺回饋設(shè)備 |
| embossed | 盲文打印機 |
| projection | 各種投影設(shè)備 |
| tty | 使用固定密度字母格柵的媒介料祠，比如電傳打字機和終端 |
- 在iPhone中的顯示
iPhone的分辨率是320px*480px，所以本應(yīng)該符合從上往下排列顯示的澎羞，但是真正運行時髓绽，瀏覽器中顯示結(jié)果卻為兩欄。
因為在iphone中使用的Safari瀏覽器在進行頁面顯示的時候?qū)⒋翱趯挾茸鳛?80px進行顯示的妆绞。所以即使在頁面中已經(jīng)寫好了頁面再小尺寸窗口中運行的樣式顺呕，iPhone中的Safari瀏覽器也不會使用這個樣式，而是選擇窗口寬度為980px時所使用的樣式括饶。
我們可以利用<meta>標簽在頁面中指定safari瀏覽器在處理本頁面時按照多少像素的窗口寬度來進行：
<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è)備瀏覽器阶牍，
將表達式中的樣式隱藏起來
*/
@media only screen and (color) {樣式代碼}
對于支持Media Queries的設(shè)備來說，將能夠正確的應(yīng)用樣式，仿佛only不存在童漩。對于不支持Media Queries但是能夠讀取Meida Type的設(shè)備（譬如IE8只支持“@media screen”）來說，由于先讀取到的是only而不是screen喷好，將忽略這個樣式泌类。
對于不支持Media Queries的瀏覽器（譬如IE8之前的瀏覽器）來說，無論是否有only藤滥，都將忽略這個樣式鳖粟。
- 支持對外部樣式表的引用
@import url(color.css) screen and (min-width: 1000px);
<link rel="stylesheet" type="text/css"
media="screen and (min-width:1000px)" href="style.css" />
