关于媒体查询

Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效 果。前面简单的介绍了Media Queries如何引用到项目中，但Media Queries有其自己的使用规则

@media 媒体类型and （媒体特性）{你的样式}

注 意 ：使用Media Queries必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型）， 随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主 要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间 使用冒号分隔。

1. max-width 最大宽度

2. min-width 最小宽度

3. 多个媒体特性使用

@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}

4. 设备屏幕的输出宽度

在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的 样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者 “max-device-width”。

5. not 关键词

使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not 关键词表示对后面的表达式执行取反操作，如：

@media not print and (max-width: 1200px){样式代码}

6. only 关键词

only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来 对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性的设 备，正常调用样式，此时就当only不存在；表示不支持媒体特性但又支持媒体类型的设备，这样就会不 读样式，因为其先会读取only而不是screen；另外不支持Media Queries的浏览器，不论是否支持 only，样式都不会被采用。如

<link rel="stylesheet" media="only screen and (max-device-width:240px)"
href="android240.css" />

在Media Query中如果没有明确指定Media Type，那么其默认为all，如：

<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)"
href="mediu.css" />