什么是媒体查询
媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有：width、height和color（等）。使用媒体查询可以在不改变页面内容的情况下，为特性的一些输出设备定制显示效果。
媒体查询语法
CSS3中的媒体查询：根据浏览器窗口大小的改变，页面颜色就会改变。
<!DOCTYPE html><html\><head><title>无标题文档</title></head><style>body{ ???background-color:#0033FF;}@media screen and (max-width: 960px){ ???body{ ???background-color:#FF6699 ???}}@media screen and (max-width: 768px){ ???body{ ???background-color:#00FF66; ???}}@media screen and (max-width: 550px){ ???body{ ???background-color:#6633FF; ???}}@media screen and (max-width: 320px){ ???body{ ???background-color:#FFFF00; ???}}</style><body><p>my ?first @media</p></body></html>CSS2中media:通过<link>标签的media属性为样式表指定设备类型：
<link rel="stylesheet" ?media="screen" ?href="portrait-screen.css"/>
媒体查询则能使我们根据设备的各种功能特性来设定响应的样式，而不仅仅只针对设备类型，在媒体查询的开头追加not会颠倒该查询的逻辑：
<link rel+"stylesheet" media="screen and (orientation: portrait)" href="portrait-screen.css"/>//设置了媒体类型和媒体特性（显示屏， 纵向放置）<link rel="stylesheet" media="not screen and (orientation: portrait)" href="portrait-screen.css" />//非纵向放置的显示屏<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:800px)" href="800wide-portrait-screen.css" />//限制只有视口宽度大于800px像素的显示屏设备才能加载此文件
媒体查询列表（需要用逗号隔开）：
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:800px), projection" href="800wide-portrait-screen.css" />
除了以上方法还可以使用CSS中的@import指令在当前样式表中按条件引入其他样式表。（使用@import方法会增加HTTP请求影响加载速度）
@import url("phone.css") screen and (max-width:360px);媒体查询可以检测的特性：
Css3中的媒体查询@media
原文地址：http://www.cnblogs.com/clean/p/7595776.html