淺談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請求數量，進而導緻頁面加載變慢。