①　使用 @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中引入

<link media="screen and (max-width:600px)" rel="stylesheet" href="example.css" />  

（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样式
}