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

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

1、media query的語法：

@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;

}

@media only screen and (min-width: 320px) {

#square {

background:red;

}

}

@media only screen and (min-width: 320px) and (max-width: 320px) {

#square {

background:yellow;

}

}

可以簡寫為：

#square{

width:100px;

height:100px;

}

@media only screen and (min-width: 320px) {

#square {

background:red;

}

}

@media only screen and (max-width: 320px) {

#square {

background:yellow;

}

}

3、media query的引入方法：

（1）在head中引入

（2）在@import中引入

<style type="text/css" media="screen and (min-width:600px) and (max-width:900px)">

@import url("css/style.css");

</style>

（3）直接在CSS中使用

@media screen and (max-width: 800px) {

// CSS樣式