淺談CSS3 響應式佈局--Media Queries

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 暫時總結那麼多，這僅表明我的角度觀點，還望同行多指點