定义和使用
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置响应式设计的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
css语法
语法一:
外联CSS语法：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
媒体类型：mediatype
关键字：and|not|only
媒体特征：media feature
语法二:
@media mediatype and|not|only (media feature) { ... }
媒体类型：mediatype
关键字：and|not|only
媒体特征：media feature
实例：<style>
@media all and (min-width:500px) { … }
</style>
媒体类型
媒体类型：mediatype
all 用于所有设备
screen 用于电脑屏幕，平板电脑，智能手机等
print 用于打印机和打印预览
speech 应用于屏幕阅读器等发声设备
aural 用于语音和声音合成器
braille 应用于盲文触摸式反馈设备
embossed 用于打印的盲人印刷设备
handheld 用于掌上设备或更小的装置，如PDA和小型电话
projection 用于投影设备
tty 用于固定的字符网格，如电报和对字符有限制的便携设备
tv 用于电视和网络电视
关键字：and|not|only
and 用来连接条件，然后括号里就是一个媒体特征查询语句
not 用来排除某种媒体类型，即用于排除符合表达式的设备
only 用来限定某种媒体类型，可用来排除不支持媒体查询的浏览器
实例：
@media screen and (min-width: 500px) and (max-width : 800px)
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="red.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-width:240px)" href="w240.css" type="text/css" />
