media type
media type是CSS2的重要属性，通过它，可以针对不同的设备指定不同的样式。
media type种类：
用法：
<link href="style.css" media="screen print" ...@media screen{ selector{rules} }
例子：
<style type="text/css">
@media screen{
body{
background: green;
}
}
@media handheld{
body{
background: red;
}
}
</style>
效果就是，screen设备的时候，背景是绿色，handheld设备的时候，背景是红色。
media query
media query是对type的增强，更适合移动互联网。一般由media type+一到多个CSS属性判断组成。属性和值之间是用冒号连接的，而不是等号，这与正常的CSS的写法一致。
支持与，或（逗号）；
not，排除指定的类型；only，用于隐藏老的用户代理的样式表；
min-和max-前缀来表达大于等于或小于等于。
支持的属性（与CSS属性不一样）：
注意IE9以下不支持！当然是有办法解决的，用respond.js。
例子：
@media screen and (min-width: 700px){
body{
background: green;
}
}
@media screen and (max-width: 600px){
body{
background: red;
}
}
效果就是screen设备并且宽度大于700px的时候显示绿色，screen设备并且宽度小于600px的之后显示红色。
没有指定的中间状态是默认的白色。
参考：