甚么是Media Queres?
Media Queres是一个特地供给自顺应网站盘算参考的网站，这里摆设了许多采纳了自顺应网站盘算计划的网站。你假设是一个网页盘算师的话断定会碰着客户哀求他自己的网站需求自顺应的功效，到时候Media Queres就会带给你巨大的盘算辅佐！
代码下载官方网址：http://mediaqueri.es/
Media Queries详解
Media Queries直译过来就是“媒体查询”，在我们往常的Web页面中head部份常看到如许的一段代码：
或许如许的情势：
不知道大师注意没有，个中两种体式格局引入CSS款式都有一个合营的属性“media”，而这个“media”就是用来指定特定的媒体范例，在HTML4和CSS2中充许你运用“media”来指定特定的媒体范例，如屏幕(screen)和打印(print)的款式表，固然另有其他的，比如说“TV”,“handheld”等，个中“all”暗示的是支撑统统媒体介质。有关于更多的Media范例，可以或许点击这里。
下面简朴说了一下HTML4和CSS2的“Media Queries”,而本日的次如果来进修CSS3中的"Media Queries"的更多运用法子和相干常识，下面我们入手下手进入本日的主题。
CSS3中的Media Queries增长了更多的媒体查询，同时你可以或许增加分歧的媒体范例的表达式用来查抄媒体可否符合某些前提，假设媒体符合相应的前提，那末就会挪用对应的 款式表。
换句简朴的说，“在CSS3中我们可以或许设置分歧范例的媒体前提，并凭据对应的前提，给相应符合前提的媒体挪用相对应的款式表”。
现在最罕见的一个 例子，你可以或许同时给PC机的大屏幕和挪动装备设置分歧的款式表。这功效是非常强盛的，他可以或许让你定制分歧的分辩率和装备，并在不窜改内容的状态下，让你修建的web页面在分歧的分辩率和装备下都能显现一般，而且不会是以而损失款式。
起首来看一个简朴的实例：
下面的media语句暗示的是：当页页宽度小于或即是600px,挪用small.css款式表来衬着你的Web页面。起首来看media的语句中包括的内容：
1、screen：这个不消说大师都知道，指的是一种媒体范例；
2、and：被称为关头词，与其雷同的另有not,only，稍后会引见；
3、(max-width:600px)：这个就是媒体特征，说得浅显一点就是媒体前提。
后面这个简朴的实例引出两个概念性的器材，一个就是媒体范例(Media Type)和 媒体特征(Media Query)，起首一起来分明明明一下这两个概念：
一、媒体范例(Media Type)
媒体范例(Media Type)在css2中是一个罕见的属性，也是一个非常有效的属性，可以或许经由媒体范例对分歧的装备指定分歧的款式，在css2中我们常碰着的就是 all(部分),screen(屏幕),print(页面打印或打邱预览情势),其实在媒体范例不止这三种，w3c统共列出了10种媒体范例。
页面中引入媒体范例法子也有多种：
1、link法子引入
2、xml体式格局引入
3、@import体式格局引入
@import引入有两种体式格局，一种是在款式文件中经由@import挪用别一个款式文件；别的一种法子是 在>/head>中的中引入，单这类运用法子在 ie6-7都不被支撑如款式文件中挪用别的一个款式文件：
@import url("css/reset.css") screen;
@import url("css/print.css") print;
在>/head>中的中挪用：
4、@media引入
这类引入体式格局和@imporr是一样的，
营销型网站优化，也有两种体式格局：
款式文件中运用：
@media screen{
挑选器{
属性：属性值；
}
}
在>/head>中的中挪用：
以上几种法子都有其各自的利害，在理想运用中我倡议运用第一种和第四种，由于这两种法子是在项目修建中是经常使用的法子，对他们的具体辨别，我就不说了，想领会的大师可以或许去找度娘或Ｇ爸，他们能帮你处置惩罚。
二、媒体特征(Media Query)
后面有简朴的提到，Media Query是CSS3 对Media Type的增强版，其实可以或许将Media Query当作Media Type(判定前提)+CSS(符合前提的款式划定规矩)，经常使用的特征w3c共列出来13种。
具体的可以或许参阅：Media features。为了更能分明明明Media Query，我们在次回到后面的实例上：
转换成css中的写法为：
@media screen and (max-width: 600px) {
挑选器 {
属性：属性值；
}
}
其实就是把small.css文件中的款式放在了@media srceen and (max-width;600px){...}的大括号当中。在语句下面的语句机关中，可以或许看出Media query和css的属性聚集很雷同，主要辨别在：
1、Media query只接管单个的逻辑表达式作为其值，或许没有值；
2、css属性用于声明若何表现页页的信息；而Media Query是一个用于判定输入装备可否满足某种前提的表达式；
3、Media Query个中的大部份接管min/max前缀，用来暗示其逻辑干系，暗示运用于大于即是或许小于即是某个值的状态
4、CSS属性哀求必须有属性值，Media Query可以或许没有值，由于其表达式前往的只需真或假两种
经常使用的Media Query以下表所示：
兼容的浏览器：
下面我们一起来看看Media Queries的具体运用体式格局
一、最大宽度Max Width
下面暗示的是：当屏幕小于或即是600px时，将采纳small.css款式来衬着Web页面。
二、最小宽度Min Width
下面暗示的是：当屏幕大于或即是900px时，将采纳big.css款式来衬着Web页面。
三、多个Media Queries运用
Media Query可以或许团结多个媒体查询，换句话说，一个Media Query可以或许包括0到多个表达式，表达式又可以或许包括0到多个关头字，和一种Media Type。
正以下面的其暗示的是当屏幕在600px-900px之间时采纳style.css款式来衬着web页面。
四、装备屏幕的输入宽度Device Width
下面的代码指的是iphone.css款式适用于最大装备宽度为480px，比如说iPhone上的显现，这里的max-device-width所指的是装备的理想分辩率，也就是指可视面积分辩率。
五、iPhone4
下面的款式是特地针对iPhone4的挪动装备写的。
六、iPad
在大数状态下，挪动装备iPad上的Safari和在iPhone上的是不异的，只是他们分歧之处是iPad声了然分歧的偏向，比如说 下面的例子，在纵向(portrait)时采纳portrait.css来衬着页面；
在横向(landscape)时采纳landscape.css来渲 染页面。
七、android
/*240px的宽度*/
/*360px的宽度*/
/*480px的宽度*/
我们可以或许运用media query为android手机在分歧分辩率供给特定款式，如许就可以或许处置惩罚屏幕分辩率的分歧给android手机的页面重构问题。
八、not关头字
not关头字是用来消弭某种制订的媒体范例，换句话来说就是用于消弭符合表达式的装备。
九、only关头字
only用来定某种特定的媒体范例，可以或许用来消弭不支撑媒体查询的浏览器。其实only许多时候是用来对那些不支撑Media Query但却支撑Media Type的装备暗藏款式表的。
其主要有：支撑媒体特征(Media Queries)的装备，一般挪用款式，此时就当only不存在；对不支撑媒体特征(Media Queries)但又支撑媒体范例(Media Type)的装备，如许就会不读了款式，由于其先读only而不是screen；别的不支撑Media Qqueries的浏览器，非论可否支撑only，款式都不会被采纳。
十、其他
在Media Query中假设没有明白指定Media Type，那末其默许为all，如：
别的另有运用逗号(，)被用来暗示并列或许暗示或，以下
下面代码中style.css款式被用在宽度小于或即是480px的手持装备上，或许被用于屏幕宽度大于或即是960px的装备上。
关于Media Query的运用这一节就引见到此，末了整体规纳一下其功效，小我认为就是一句话：Media Queries能在分歧的前提下运用分歧的款式，运用页面抵达分歧的衬着效果。
几款Media Query盘算案例显现：
FROONT
International Polar Foundation
Hirondelle USA