甚么是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