CSS3中的Media Queries增加了更多的媒体查询，同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的样式表。换句简单的说，“在CSS3中我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表”。现在最常见的一个例子，你可以同时给PC机的大屏幕和移动设备设置不同的样式表。这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式
首先来看一个简单的实例
- screen：这个不用说大家都知道，指的是一种媒体类型
- and：被称为关键词，与其相似的还有not,only
- （max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件
1.媒体类型(Media Type)
媒体类型(Media Type)在css2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是all（全部）,screen（屏幕）,print（页面打印或打邱预览模式）,其实在媒体类型不止这三种，w3c总共列出了10种媒体类型
页面中引入媒体类型方法也有多种
1.1 link方法引入
1.2 @import方式引入
1.3 @media引入
2.媒体特性（Media Query）
前面有简单的提到，Media Query是CSS3 对Media Type的增强版，其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)
转换成css中的写法为
其实就是把small.css文件中的样式放在了@media srceen and (max-width;600px){…}的大括号之中
常用的media query
3.下面我们一起来看看Media Queries的具体使用方式
3.1最大宽度Max Width
上面表示的是：当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面
3.2最小宽度Min Width
上面表示的是：当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面
3.3多个Media Queries使用
Media Query可以结合多个媒体查询，换句话说，一个Media Query可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种Media Type。正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面
3.4设备屏幕的输出宽度Device Width
上面的代码指的是iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率
3.5iPhone4
上面的样式是专门针对iPhone4的移动设备写的
3.6 not关键字
not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备，比如 @media not print（非打印设备）
3.7 only关键字
only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用
3.8 在Media Query中如果没有明确指定Media Type，那么其默认为all
相关文章：