Media Queries
Media Queries是CSS3新增加的一个模块功能，其最大的特色就是通过CSS3来查询媒体，然后调用对应的样式。其实这个功能在CSS2.1中就有出现过，只不过那个时候此功能并不强大，我们最常见的就是给打印设备添加打印样式。随着时代的变化，这个模块功能越来越强大。
在彻底地了解Media Queries之前，我们需要了解其中的两个重要部分，第一个是媒体类型，第二个是媒体特性。
一、媒体类型
媒体类型（Media Type）在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。
在实际中媒体类型有近十种之多，实际之中常用的也就那么几种，不过媒体类型的引用方法也有多种，常见的有：link标签、@import和CSS3新增的@media几种：
link方法
link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。如下所示：
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
@import方法
@import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件;另一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不支持，如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型。
@importurl(reset.css) screen;
在<head>中的<style>标签中引入媒体类型方法。
<head>
<style type="text/css">
@importurl(style.css) all;
</style>
</head>
@media方法
@media是CSS3中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似也具有两方式。
（1）在样式文件中引用媒体类型：
@media screen{
选择器{/*你的样式代码写在这里...*/}
}
（2）使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。
<head>
<style type="text/css">
@media screen{
选择器{/*你的样式代码写在这里...*/}
}
</style>
</head>
Media Queries能在不同的条件下使用不同的样式，使页面在不同的终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中，但Media Queries有其自己的使用规则。具体来说，Media Queries的使用方法如下。
@media 媒体类型 and (媒体特性){你的样式}
注意：使用Media Queries必须要使用"@media"开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一部分指的是媒体特性，第二部分分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如：
(max-width:480px)
与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，而不是使用小于（<）和大于（>）这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。
1.最大宽度max-width
"max-width"是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：
@media screen and (max-width:480px){
.ads{
display:none;
}
}
上面表示的是：当屏幕小于或等于480px时，页面中的广告区块（.ads）都将被隐藏。
2.最小宽度min-width
"min-width"与"max-width"相反，指的是媒体类型大于或等于指定宽度时，样式生效
@media screen and (min-width:900px){
.wrapper{width:980px;}
}
上面表示的是：当屏幕大于或等于900px时，容器".wrapper"的宽度为980px.
3.多个媒体特性使用
Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式可以包含0到多个关键字，以及一种媒体类型。
当屏幕在600px~900px之间时，body的背景色渲染为"#f5f5f5",如下所示。
@media screen and (min-width:600px) and (max-width：900px){
body{background-color:#f5f5f5;}
}
4.设备屏幕的输出宽度Device Width
device-width,device-height——屏幕宽高
width,height——渲染窗口宽高（可视区域）
orientation——设备方向
resolution——设备分辨率
在智能设备上，例如iPhone,iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用"min/max"对于参数，如"min-device-width"或者"max-device-width"。
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css"/>
上面的代码指的是"iphone.css"样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的"max-device-width"所指的是设备的实际分辨率，也就是可视面积分辨率。
5.not关键词
使用关键词"not"是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如：
@media not print and (max-width:1200px){样式代码}
上面代码表示的是：样式代码将使用在除打印设备和设备宽度小于1200px下所有设备中。
6.only关键词
only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持Media Type的设备，正常调用样式，此时就当only不存在;表示不支持媒体特性(例如max-width)但又支持Media Type的设备，这样就会不读样式，因为其先会读取only而不是screen；另外不支持Media Queries的浏览器，不论是否支持only,样式都不会被采用。
在Media Query中如果没有明确指定Media Type，那么其默认为all，如：
<linkrel="stylesheet " media="(min-width:701px) and (max-width:900px)" href="mediu.css"/>
另外在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示。
<linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px),screen and (min-width:960px)"/>
上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。
到目前为止，CSS3 Media Queries得到了众多浏览器支持，除了IE6-8浏览器不支持之外，在所有现代浏览器中都可以完美支持。还有一个与众不同的时，Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀。
网友评论