CSS3媒体查询：

 

　　语法：

 

　　<media_query_list>：<media_query>[,<media_query>]

 

　　<media_query>：only|not <mediaType> and <expression>[ and <expression>]

 

　　<expression>：<mediaFeature>:<value>

 

　　关键词“not”取补集，“only”不再推荐使用（not，only都是可选的），“，”用法同CSS选择器中的逗号用法，表示一种合写。

 

　　@media not|only mediaType and （mediaFeature） {

 

　　CSS Codes;

 

　　}

 

　　或

 

　　<link rel="stylesheet" media="not|only mediaType and （mediaFeature）" href="">

 

　　或

 

　　<style type="text/css" media="not|only mediaType and （mediaFeature）">

 

　　@import url（"mystylesheet.css"）;

 

　　</style>

 

　　及：（这种可以在style标签里使用，也可以在一个css文件里使用）

 

　　@media not|only mediaType and （mediaFeature）{

 

　　选择器{

 

　　属性：属性值;

 

　　}

 

　　}

 

　　媒体查询大部分都接受前缀min或max，表示大于等于或小于等于。（切记min和max对应的顺序，不要被表象所误导）

 

　　and前后必须留空格，例如：（浏览器不产生任何效果）

 

　　@media screen and（max-width:600px）{

 

　　h2{

 

　　color:red

 

　　}

 

　　}

 

　　媒体类型：（一些类型已从CSS3删除）

 

　　all --用于所有设备

 

　　print --用于打印机及打印预览

 

　　screen --用于电脑、平板、手机屏幕（一般只用这个和all）

 

　　speech --用于屏幕阅读器等发声设备

 

　　媒体特性：

 

　　width --页面可见区域的宽（一般只用这个和device-width）

 

　　height --页面可见区域的高

 

　　device-width --设备的屏幕可见区域宽

 

　　device-height --设备的屏幕可见区域高

 

　　aspect-ratio --设备的width与height的比

 

　　device-aspect-ratio --设备的device-width与device-height的比

 

　　resolution --设备的分辨率，如96dpi, 300dpi，118dpcm

 

　　orientation --定义height是否大于或等于width，值portrait代表是，landscape代表否

 

　　以上参数（除最后一个）均可以加max-或min-前缀。

 

　　前四个参数比较常用，单位都是CSS的绝对单位，包括px em mm cm等。

 

　　部分用法：

 

　　@media screen and （orientation:portrait）{

 

　　h2{

 

　　color:red;

 

　　}

 

　　}

 

　　@media screen and （max-aspect-ratio:4/3）{

 

　　h2{

 

　　color:red;

 

　　}

 

　　}

 

　　@media screen and （min-resolution:96dpi）{

 

　　h2{

 

　　color:red;

 

　　}

 

　　}

 

　　全部参数详见：

 

　　常用的几种屏幕宽度设定：

 

　　@media screen and （min-width:1200px） {

 

　　css-code;

 

　　}

 

　　@media screen and（min-width:960px） and （max-width:1199px） {

 

　　css-code;

 

　　}

 

　　@media screen and（min-width:768px） and （max-width:959px） {

 

　　css-code;

 

　　}

 

　　@media screen and（min-width:480px） and （max-width:767px） {

 

　　css-code;

 

　　}

 

　　@media screen and （max-width:479px） {

 

　　css-code;

 

　　}

 

　　使用JS动态查询媒体特征：

 

　　window.matchMedia（）方法接受一个media_query语句的字符串作为参数，返回一个MediaQueryList对象，该对象有media和matches两个属性。

 

　　media：返回所查询的media_query语句字符串

 

　　matches：返回一个布尔值，表示当前环境是否匹配查询语句

 

　　注意：如果matchMedia无法解析media_query参数，matches属性返回的总是false，而不是报错

 

　　例如：

 

　　var result=window.matchMedia（"screen （min-width: 600px）"）;

 

　　console.log（result.media）; //"（min-width: 600px）"

 

　　console.log（result.matches）; //true

 

　　matchMedia方法返回的MediaQueryList对象有两个方法，用来监听事件：addListener和removeListener

 

　　mql.addListener（mqCallback）;

 

　　mql.removeListener（mqCallback）;

 

　　注意，只有mediaQuery查询结果发生变化时，才调用指定的回调函数mqCallback，所以，如果想要mediaQuery查询未变化时，就显示相应效果，需要提前调用一次函数。

 

　　下面这个例子是当页面宽度小于1000px时，页面背景颜色为品红色；否则为淡蓝色：

 

　　var mql=window.matchMedia（"（min-width: 1000px）"）;//mql=media query list

 

　　function mqCallback（mql）{

 

　　if （mql.matches）{

 

　　document.body.background='pink';

 

　　}else{

 

　　document.body.background='lightblue';

 

　　}

 

　　}

 

　　mqCallback（mql）;

 

　　mql.addListener（mqCallback）;

 

　　//注意，addListener触发条件是每次改变matches值时，只有true<->false才是叫做改变，true<->true或false<->false不算改变也不会触发addListener。