媒体查询(media queries)是响应式设计(Responsive Web Design简称RWD)必不可少的一部分。
媒体查询有两个关键词min-width和max-width, 接触过媒体查询的同学可能会认同我， 这两个关键词很绕；从字面上理解它们可能不那么容易，以至于我每次都需要在脑海里面不断演算，然后小心翼翼地测试效果（大概和写正则表达式的感觉差不多）。
需要提醒一下的是CSS的优先级概念，在样式表中越后的样式优先级越高，就是后面的样式会覆盖前面的样式。在这个例子中，我们先设定了默认颜色为灰色。如果width大于960px的，会显示灰色。
假设width为750px，会先匹配到灰色，再匹配红色，最终显示了橙色。由于width等于750px，它不在0-550px和0-320px这个范围，浏览器不会解析这些样式。
W3C文档这样描述的：The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
翻译过来就是：only是为了在不支持媒体查询的浏览器中隐藏样式表，浏览器处理以only开头的关键词时将会忽略only。
@media only screen and (min-width:xxx) and (max-width:xxx) 与 @media screen and (min-width:xxx) and (max-width:xxx) 在支持媒体查询的浏览器中其实是一模一样的，没有任何区别，因为only将被忽略。但是在不支持媒体查询的浏览器中由于没有only这个媒体类型，因此会直接忽略这条媒体查询。在不支持媒体查询的浏览器中，如果不加only，@media screen and (min-width:xxx) and (max-width:xxx)将会被解析为@media screen，明显与期望不一致。因此通过加一个浏览器不认识的媒体类型only则浏览器将会直接忽略这条媒体查询。
media="only screen and (min-width: 401px) and (max-width: 600px)"/* 在支持媒体查询的浏览器中等于*/
media="screen and (min-width: 401px) and (max-width: 600px)"
/*在不支持媒体查询的浏览器中解析到带only的媒体查询时，会将only视为媒体类型。（由于没有only这种媒体类型，因此将不会被应用）*/
media="only"
/*如果不带only，在不支持媒体查询的浏览器中*/
media="screen and (min-width: 401px) and (max-width: 600px)"
/*将被解析为screen，将会被应用到屏幕类型设备上*/
media="screen"
1、css3媒体查询就是为了适应各种设备，查询媒介设备，来添加不同的样式，不会在行内使用；2、从web标准的设计来讲，主张css样式和html结构分离，建议使用外部文件或内联样式。
