CSS3 Media Queries ， CSS3媒體查詢。使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式；也可以針對不同的屏幕尺寸設(shè)置不同的樣式宠页；當(dāng)重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。
用法如下
@media 媒體類型 and|not|only (媒體特性) {
......
}
媒體類型
值 描述
all :用于所有設(shè)備
print 用于打印機(jī)和打印預(yù)覽
screen 用于電腦屏幕，平板電腦忘瓦，智能手機(jī)等搁廓。
speech 應(yīng)用于屏幕閱讀器等發(fā)聲設(shè)備
媒體特性：
aspect-ratio: 定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾扰c高度的比率
color: 定義輸出設(shè)備每一組彩色原件的個(gè)數(shù)引颈。如果不是彩色設(shè)備耕皮，則值等于0
color-index: 定義在輸出設(shè)備的彩色查詢表中的條目數(shù)。如果沒有使用彩色查詢表蝙场，則值等于0
device-aspect-ratio: 定義輸出設(shè)備的屏幕可見寬度與高度的比率凌停。
device-height: 定義輸出設(shè)備的屏幕可見高度。
device-width: 定義輸出設(shè)備的屏幕可見寬度售滤。
grid: 用來查詢輸出設(shè)備是否使用柵格或點(diǎn)陣罚拟。
height: 定義輸出設(shè)備中的頁面可見區(qū)域高度。
max-aspect-ratio: 定義輸出設(shè)備的屏幕可見寬度與高度的最大比率完箩。
max-color: 定義輸出設(shè)備每一組彩色原件的最大個(gè)數(shù)赐俗。
max-color-index: 定義在輸出設(shè)備的彩色查詢表中的最大條目數(shù)。
max-device-aspect-ratio: 定義輸出設(shè)備的屏幕可見寬度與高度的最大比率弊知。
max-device-height: 定義輸出設(shè)備的屏幕可見的最大高度阻逮。
max-device-width: 定義輸出設(shè)備的屏幕最大可見寬度。
max-height: 定義輸出設(shè)備中的頁面最大可見區(qū)域高度秩彤。
max-monochrome: 定義在一個(gè)單色框架緩沖區(qū)中每像素包含的最大單色原件個(gè)數(shù)叔扼。
max-resolution: 定義設(shè)備的最大分辨率。
max-width: 定義輸出設(shè)備中的頁面最大可見區(qū)域?qū)挾取?br>
min-aspect-ratio: 定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾扰c高度的最小比率漫雷。
min-color: 定義輸出設(shè)備每一組彩色原件的最小個(gè)數(shù)瓜富。
min-color-index: 定義在輸出設(shè)備的彩色查詢表中的最小條目數(shù)。
min-device-aspect-ratio: 定義輸出設(shè)備的屏幕可見寬度與高度的最小比率降盹。
min-device-width: 定義輸出設(shè)備的屏幕最小可見寬度与柑。
min-device-height: 定義輸出設(shè)備的屏幕的最小可見高度。
min-height: 定義輸出設(shè)備中的頁面最小可見區(qū)域高度澎现。
min-monochrome: 定義在一個(gè)單色框架緩沖區(qū)中每像素包含的最小單色原件個(gè)數(shù)
min-resolution: 定義設(shè)備的最小分辨率仅胞。
min-width : 定義輸出設(shè)備中的頁面最小可見區(qū)域?qū)挾取?br>
monochrome: 定義在一個(gè)單色框架緩沖區(qū)中每像素包含的單色原件個(gè)數(shù)。如果不是單色設(shè)備剑辫，則值等于0
orientation: 定義輸出設(shè)備中的頁面可見區(qū)域高度是否大于或等于寬度干旧。
resolution: 定義設(shè)備的分辨率。如：96dpi, 300dpi, 118dpcm
scan: 定義電視類設(shè)備的掃描工序妹蔽。
width: 定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾取?/p>
media query引用的方法有兩種椎眯，
第一種：
<link rel="stylesheet" media=" 媒體類型 and|not|only (媒體特性)" href="mystylesheet.css">
媒體查詢之間用逗號分開表示并列，如
<link rel="stylesheet" media="handheld and (max-width:20em), screen and(max-width:30em), projection" href="mystylesheet.css">
第二種：在css中也可以這樣
@media screen and (max-device-width: 400px) {
......
}
還可以使用css的@import 指令在當(dāng)前樣式表中按條件引入其他樣式表胳岂，如
@import url('phone.css') screen and (max-width: 360px)
需要注意一點(diǎn)编整，使用css的@import 方式會增加http請求，這樣會影響加載速度
現(xiàn)在瀏覽器雖然可以智能地忽略與自身不匹配的樣式文件乳丰，但它卻不一定下載這些文件掌测，因此，將不同媒體查詢的樣式保存到獨(dú)立文件中沒有太大好處产园，使用多個(gè)獨(dú)立文件會增加用于頁面渲染的HTTP請求數(shù)量汞斧，從而導(dǎo)致頁面加載變慢夜郁。
瀏覽器支持問題：ie8及ie8以下瀏覽器不支持css媒體查詢
對于CSS3 響應(yīng)式布局--Media Queries 暫時(shí)總結(jié)那么多，這僅代表個(gè)人角度觀點(diǎn)粘勒，還望同行多指點(diǎn)
