①使用@media查詢可以針對(duì)不同的媒體類型定義不同的樣式。
②@media可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式，特別是如果需要設(shè)置設(shè)計(jì)響應(yīng)式的頁(yè)面。
③重置瀏覽器大小的過(guò)程中，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面。
1、mediaquery的語(yǔ)法：
@media媒介類型and|not|only(媒介特征){
...
}
媒介類型：
print：用于打印機(jī)和打印預(yù)覽
screen：用于電腦屏幕，平板電腦，智能手機(jī)等
all：用于所有媒體設(shè)備類型
媒介特征：
device-height：定義輸出設(shè)備的屏幕可見(jiàn)高度。
device-width：定義輸出設(shè)備的屏幕可見(jiàn)寬度。
height：定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域高度。
width：定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域?qū)挾取?/p>
max-device-height：定義輸出設(shè)備的屏幕可見(jiàn)的最大高度。
max-device-width：定義輸出設(shè)備的屏幕可見(jiàn)的最大寬度。
max-height：定義輸出設(shè)備中的頁(yè)面可見(jiàn)的最大高度。
max-width：定義輸出設(shè)備中的頁(yè)面可見(jiàn)的最大寬度。
min-device-height：定義輸出設(shè)備的屏幕可見(jiàn)的最小高度。
min-device-width：定義輸出設(shè)備的屏幕可見(jiàn)的最小寬度。
min-height：定義輸出設(shè)備中的頁(yè)面可見(jiàn)的最小高度。
min-width：定義輸出設(shè)備中的頁(yè)面可見(jiàn)的最小寬度。
2、max-device-width與max-width的區(qū)別：
max-width指的是顯示區(qū)域的寬度，比如瀏覽器的顯示區(qū)域?qū)挾龋籱ax-device-width指的是設(shè)備整個(gè)顯示區(qū)域的寬度，比如設(shè)備的實(shí)際屏幕寬度，也就是設(shè)備分辨率。
max-width在窗口大小改變或橫豎屏轉(zhuǎn)換時(shí)會(huì)發(fā)生變化；max-device-width只與設(shè)備相關(guān)，在窗口大小改變或橫豎屏轉(zhuǎn)換時(shí)都不會(huì)發(fā)生變化。
3、實(shí)例：
為不同頁(yè)面寬度設(shè)置不同的CSS樣式——頁(yè)面寬度大于320px和頁(yè)面寬度等于320px時(shí)分別為div設(shè)置不同的背景顏色。
#square{
width:100px;
height:100px;
}
@mediaonlyscreenand(min-width:320px){
#square{
background:red;
}
}
@mediaonlyscreenand(min-width:320px)and(max-width:320px){
#square{
background:yellow;
}
}
可以簡(jiǎn)寫(xiě)為：
#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樣式