①使用@media查詢可以針對不同的媒體類型定義不同的樣式。

②@media可以針對不同的屏幕尺寸設置不同的樣式，特別是如果需要設置設計響應式的頁面。

③重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

1、mediaquery的語法：

@media媒介類型and|not|only(媒介特征){

...

}

媒介類型：

print：用于打印機和打印預覽

screen：用于電腦屏幕，平板電腦，智能手機等

all：用于所有媒體設備類型

媒介特征：

device-height：定義輸出設備的屏幕可見高度。

device-width：定義輸出設備的屏幕可見寬度。

height：定義輸出設備中的頁面可見區域高度。

width：定義輸出設備中的頁面可見區域寬度。

max-device-height：定義輸出設備的屏幕可見的最大高度。

max-device-width：定義輸出設備的屏幕可見的最大寬度。

max-height：定義輸出設備中的頁面可見的最大高度。

max-width：定義輸出設備中的頁面可見的最大寬度。

min-device-height：定義輸出設備的屏幕可見的最小高度。

min-device-width：定義輸出設備的屏幕可見的最小寬度。

min-height：定義輸出設備中的頁面可見的最小高度。

min-width：定義輸出設備中的頁面可見的最小寬度。

2、max-device-width與max-width的區別：

max-width指的是顯示區域的寬度，比如瀏覽器的顯示區域寬度；max-device-width指的是設備整個顯示區域的寬度，比如設備的實際屏幕寬度，也就是設備分辨率。

max-width在窗口大小改變或橫豎屏轉換時會發生變化；max-device-width只與設備相關，在窗口大小改變或橫豎屏轉換時都不會發生變化。

3、實例：

為不同頁面寬度設置不同的CSS樣式——頁面寬度大于320px和頁面寬度等于320px時分別為div設置不同的背景顏色。

#square{

width:100px;

height:100px;

}

@mediaonlyscreenand(min-width:320px){

#square{

background:red;

}

}

@mediaonlyscreenand(min-width:320px)and(max-width:320px){

#square{

background:yellow;

}

}

可以簡寫為：

#square{

width:100px;

height:100px;

}

@mediaonlyscreenand(min-width:320px){

#square{

background:red;

}

}

@mediaonlyscreenand(max-width:320px){

#square{

background:yellow;

}

}

3、mediaquery的引入方法：

（1）在head中引入

<linkmedia="screenand(max-width:600px)"rel="stylesheet"href="example.css"/>

（2）在@import中引入

<styletype="text/css"media="screenand(min-width:600px)and(max-width:900px)">

@importurl("css/style.css");

</style>

（3）直接在CSS中使用

@mediascreenand(max-width:800px){

//CSS樣式