②@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样式