深入剖析媒体查询

  媒体查询主要用在响应式布局中，使一套样式能够适应于各种各样的屏幕设备。应用媒体查询的方式有3种，CSS3中的媒体查询、link标签中的媒体查询和JS中的媒体查询。

CSS3中的媒体查询

  CSS3媒体查询由3部分构成：媒体类型 + 逻辑操作符 + 媒体特征。媒体特征通过逻辑操作符可以串联多个，例如:

@media screen and (min-width: 768px) and (max-width: 1024px) {
   body {
       padding-left: 15px;
       padding-ring: 15px;
   }
}

其中screen是媒体类型，and是逻辑操作符，min-width和max-width都是媒体特征。整条媒体查询的意思就是当屏幕设备的可视区宽度在768px和1024px之间时应用该样式。
  媒体类型是可选的，目前有4个值，其他值已被废弃。默认值就是all，代表所有设备；screen代表屏幕设备，如电脑屏幕、笔记本屏幕、手机屏幕等；print代表打印机或打印预览；speech代表屏幕阅读器等发声设备。一般常用网站可以忽略媒体类型，如果网页需要考虑打印时，就需要区分样式用于screen还是print。
  媒体特征从字面意思就知道是媒体的特征，如宽度和高度。特别需要注意的是，使用时需要用圆括号括起，如(min-width: 768px)。媒体特征的值比较多，但在响应式布局中使用的特征值就是媒体的宽度或高度。宽度分为2类，一类针对可视区宽度(width/min-width/max-width)，通过调整浏览器的宽度，可视区的宽度就会发生变化；另一类针对的是整个设备的宽度(device-width/min-device-width/max-device-width)，对于一个具体设备，设备的宽度是不会发生变化的。width/device-width代表可视区/设备宽度为指定值时生效，min-width/device-min-width代表可视区/设备宽度不小于指定值时生效，max-width/device-max-width代表可视区/设备宽度不大于指定值时生效。高度(height)的用法各位大大可以根据上面宽度的介绍类推出来。
  逻辑操作符取值有3个，常用的值就是and。and的作用和js中的&&操作符一样，每部分值都为真时才生效。如screen and (min-width: 768px)，只有当是屏幕设备且可视区宽度不小768px时才生效，在打印或打印预览中样式就不会生效。其他2个值是only和not，一般不常用，可以忽略。
  假设将屏幕设备分为3种类型，标准模板如下:

// 手机设备
@media screen and (max-width: 768px) {
  // 写样式即可
}

// 平板设备
@media screen and (min-width: 769px) and (max-width: 1024px) {
  // 写样式即可
}

// 桌面显示器设备
@media screen and (min-width: 1025px) {
  // 写样式即可
}

link标签中的媒体查询

  如果对上述介绍的CSS3中的媒体查询了解清楚了，link标签中的媒体查询使用则比较简单。直接上例子:

相比于CSS3中的媒体查询只用去掉@media即可，其他完全的一模一样。仍然需要注意，媒体特征需要用圆括号括起来，媒体特征需要用圆括号括起来，媒体特征需要用圆括号括起来，重要事情说3遍。

JS中的媒体查询

  window对象中新增了一个函数matchMedia。该函数只有一个参数，取值和link标签的media属性取值一模一样，例如matchMedia('(max-width: 800px)')，再次强调媒体特征需要用圆括号括起来，不然不生效。
  matchMedia的返回值是MediaQueryList 对象，其中addListener可以用于监听媒体的特征变化(如可视区宽度变化)，MediaQueryList的matches用于检测查询结果，匹配就为true，不匹配就为false。至于MediaQueryList 对象的其余属性和方法请各位大大自己摸索。用法举例如下:

function myFunction(event) {
    if (event.matches) {
        document.body.style.backgroundColor = "yellow";
    } else {
        document.body.style.backgroundColor = "pink";
    }
}
 
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // 执行时调用的监听函数
x.addListener(myFunction) // 状态改变时添加监听器