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