CSS3及JS媒体查询教程

 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="mystylesheet.css"> 
 或 
 <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; 
  /* 
  页面的高>=宽，h2变红 
  一般用于检测设备处于横向还是纵向，portrait竖屏 
  */ 
     } 
 } 
 
 
 @media screen and (max-aspect-ratio:4/3){ 
     h2{ 
         color:red; 
  /* 
  页面的宽比高<=4比3，h2变红 
  不加max或min前缀表示绝对等于，比如aspect-ratio:4/3表示只有宽比高是4/3时候才执行css代码，对于width这样之类的属性同理 
  */ 
     } 
 } 
 
 
 @media screen and (min-resolution:96dpi){ 
     h2{ 
         color:red; 
  /* 
  设备屏幕分辨率>=96dpi，h2变红 
  你也可以用118dpcm这样的单位 
  */ 
     } 
 } 
 全部参数详见：http://www.runoob.com/cssref/css3-pr-mediaquery.html 
 
 
 常用的几种屏幕宽度设定： 
 @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。 