CSS3 Media Queries ， CSS3媒體查詢。使用 @media 查詢，你可以針對不同的媒體型別定義不同的樣式；也可以針對不同的螢幕尺寸設定不同的樣式；當重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。 用法如下
@media 媒體型別 and|not|only (媒體特性) {
......
}
複製程式碼媒體型別 值 描述 all :用於所有裝置 print 用於印表機和列印預覽 screen 用於電腦螢幕，平板電腦，智慧手機等。 speech 應用於螢幕閱讀器等發聲裝置
媒體特性： aspect-ratio: 定義輸出裝置中的頁面可見區域寬度與高度的比率 color: 定義輸出裝置每一組彩色原件的個數。如果不是彩色裝置，則值等於0 color-index: 定義在輸出裝置的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等於0 device-aspect-ratio: 定義輸出裝置的螢幕可見寬度與高度的比率。 device-height: 定義輸出裝置的螢幕可見高度。 device-width: 定義輸出裝置的螢幕可見寬度。 grid: 用來查詢輸出裝置是否使用柵格或點陣。 height: 定義輸出裝置中的頁面可見區域高度。 max-aspect-ratio: 定義輸出裝置的螢幕可見寬度與高度的最大比率。 max-color: 定義輸出裝置每一組彩色原件的最大個數。 max-color-index: 定義在輸出裝置的彩色查詢表中的最大條目數。 max-device-aspect-ratio: 定義輸出裝置的螢幕可見寬度與高度的最大比率。 max-device-height: 定義輸出裝置的螢幕可見的最大高度。 max-device-width: 定義輸出裝置的螢幕最大可見寬度。 max-height: 定義輸出裝置中的頁面最大可見區域高度。 max-monochrome: 定義在一個單色框架緩衝區中每畫素包含的最大單色原件個數。 max-resolution: 定義裝置的最大解析度。 max-width: 定義輸出裝置中的頁面最大可見區域寬度。 min-aspect-ratio: 定義輸出裝置中的頁面可見區域寬度與高度的最小比率。 min-color: 定義輸出裝置每一組彩色原件的最小個數。 min-color-index: 定義在輸出裝置的彩色查詢表中的最小條目數。 min-device-aspect-ratio: 定義輸出裝置的螢幕可見寬度與高度的最小比率。 min-device-width: 定義輸出裝置的螢幕最小可見寬度。 min-device-height: 定義輸出裝置的螢幕的最小可見高度。 min-height: 定義輸出裝置中的頁面最小可見區域高度。 min-monochrome: 定義在一個單色框架緩衝區中每畫素包含的最小單色原件個數 min-resolution: 定義裝置的最小解析度。 min-width : 定義輸出裝置中的頁面最小可見區域寬度。 monochrome: 定義在一個單色框架緩衝區中每畫素包含的單色原件個數。如果不是單色裝置，則值等於0 orientation: 定義輸出裝置中的頁面可見區域高度是否大於或等於寬度。 resolution: 定義裝置的解析度。如：96dpi, 300dpi, 118dpcm scan: 定義電視類裝置的掃描工序。 width: 定義輸出裝置中的頁面可見區域寬度。
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 指令在當前樣式表中按條件引入其他樣式表，如
@import url('phone.css') screen and (max-width: 360px)
複製程式碼需要注意一點，使用css的@import 方式會增加http請求，這樣會影響載入速度
現在瀏覽器雖然可以智慧地忽略與自身不匹配的樣式檔案，但它卻不一定下載這些檔案，因此，將不同媒體查詢的樣式儲存到獨立檔案中沒有太大好處，使用多個獨立檔案會增加用於頁面渲染的HTTP請求數量，從而導致頁面載入變慢。
瀏覽器支援問題：ie8及ie8以下瀏覽器不支援css媒體查詢
對於CSS3 響應式佈局--Media Queries 暫時總結那麼多，這僅代表個人角度觀點，還望同行多指點