第三篇 媒体查询

什么是媒体查询

有时候我们在浏览网页的时候并不会将浏览器放大到全屏，而是缩成一小块，方便我们在查看浏览器内容时，做一些别的事。有时候我们还会改变浏览器的显示比例。但是这些操作都会影响整体网页的显示，若是css样式表中定义的规则样式不够健壮的话，网页就会出现各种问题。

甚至我们有时候想让网页对不同设备产生不同效果。例如：让鼠标悬浮点击和手指触屏点击的样式不同，在电脑上显示的和在手机上、打印机上显示的样式不同。

而媒体查询就是一种，可以适应不同媒体环境的css机制。

CSS中的媒体查询

使用@media实现css声明的媒体查询

语法

每条媒体查询语句都由一个可选的媒体类型和任意数量的媒体特性表达式构成。

一条媒体查询声明可以由多条媒体查询语句组成。

@media 媒体类型 逻辑关键字 媒体特性表达式 {
    当环境及设备符合条件时的样式表合集
}

其中样式表合集指的是可以像style标签内部内容一样，存放多个css声明。

媒体查询的生效时机

当媒体类型（如果指定）与在其上显示文档的设备匹配并且所有媒体功能表达式都计算为 true 时，媒体查询将计算为 true，应用对应样式。涉及未知媒体类型的查询始终为 false。

媒体类型

所谓媒体类型就是用来指明不同媒体特点的标识符。媒体类型一般是可选的，若是不写则静默使用all类型。

• all 用于所有媒体
• print 为有视力的用户打印文档时使用，也在预览打印效果时使用。
• screen 在屏幕媒体上展示文档
• speech 用于语音合成器

多个媒体类型使用逗号作为分隔符，此时逗号起的是逻辑或的作用。

实例

@media print, screen {
    body {
        color: black;
    }
    h1 {
        color: blue;
    }
}

该例子中，若是文档出现在打印机或是打印预览或是使用电脑、手机查看时，会应用其中css样式。

媒体特性

描述了用户代理【浏览器】、输出设备，或是浏览环境的具体特征。

媒体特性表达式是完全可选的，它负责测试这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号括起来。

常用的媒体特性

0. any-hover 用于测试是否有任意可用的输入机制允许指示工具（鼠标等）在元素上悬停。值如下：

   • none 可用的输入机制中没有机制允许hover时，该媒体特性为true
   • hover 可用的输入机制中有一个或多个机制允许hover时，为true

@media (any-hover: hover) {
    a:hover {
        color: white;
    }
    /*上述代码会在浏览器机制上允许鼠标悬停的情况下，应用css样式。*/
}

2. any-pointer 测试用户是否拥有任意定点装置（如鼠标） 。以及如果存在定点装置，它的精确度是什么样的

   • none 没有可用的定点设备。
   • coarse 至少有一个精度有限的定点装置。
   • fine 至少有一个精确的定点装置。

3. aspect-ratio 用于测试可视窗口的宽高比。可以用该媒体特性指定一个确定的<ratio>值。也可以使用min-aspect-ratio和max-aspect-ratio分别查询最小和最大的值.【ratio的详细介绍】

/* 最小宽高比 */
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /* blue */
  }
}
​
/* 最大宽高比 */
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff;  /* cyan */
  }
}
​
/* 明确的宽高比，放在最下部防止同时满足条件时的覆盖*/
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /* red */
  }
}

4. color，输出设备像素的比特位数，常见有8，16，32.若是黑白的则为0.可使用color来定义一个具体位数，也可以使用min-与max-前缀定义范围。若是只写(color)，那么设备不是黑白的就为true。

5. width，会检测可视窗口的宽度来应用样式。若是使用width则可以直接设定一个<length>值表示可视窗口为这么大时才会应用样式。也可以使用min-与max-前缀进行范围检测。<length>

6. height, 会检测可视窗口的高度来应用样式。若是使用height则可以直接设定一个<length>值表示可视窗口为这么大时才会应用样式。也可以使用min-与max-前缀进行范围检测。

7. grid，检测输出设备使用网格屏幕还是点阵屏幕，若是值设定为1则会在网格屏幕应用样式。若是为0则是点阵屏幕才会应用样式。

8. scripting 检测脚本是否可用，

   • none 当前文档完全不支持脚本
   • initial-only 当前文档只支持第一次页面加载时载入的脚本，在第一次加载页面完成后便不启用脚本
   • enabled 完全支持脚本

媒体查询中的逻辑关键字

• and: 用于连接两个或多个媒体特性，只有被and连接的所有媒体特征都符合要求，整个媒体查询才会为true。

  • 例如@media screen and (color) and (min-width: 100px)表示只有屏幕设备为有屏幕的，并且设备为有颜色且最小可视窗口不小于100px时才会应用对应的css规则。

• ,：用于分割两个或多个媒体查询的，相当于css声明中的选择器分隔符，有逻辑或的意义，但凡是逗号连结的所有查询中有一个为true便会应用css样式。逗号两边的媒体查询无法共享媒体类型，也就是说两边是两个独立的媒体查询。

  • 例如：@media print， screen and (color) and (min-width: 100px)这段代码表示的并不是媒体类型为打印预览或打印或有屏幕的设备且设备有颜色且最小可视窗口宽度大于100px时才会应用样式；而是媒体类型为打印或打印预览时应用该样式，或有屏幕的设备且设备有颜色且最小可视窗口宽度大于100px时会应用样式。

• not：对整个查询取反，只可以出现在每条媒体查询的最前面，且该条媒体查询必须指定媒体类型。使用逗号进行分割的媒体查询列表中使用not时，他仅仅会将被逗号分隔的这一条媒体查询进行取反，而不是否定整个查询列表。所以可以在逗号后面写not

  • 例如： screen, not all and (max-width: 220){...}意思是只要是有屏幕的设备或是设备可视窗口宽度大于等于220.那么对应的样式才会应用。

• only 只可用于每条媒体查询的开头，且该条媒体查询必须指定媒体类型。专门用于旧版浏览器的兼容操作。若是不支持媒体查询，会直接忽略掉样式表不会应用。若是支持媒体查询，则忽略掉only。

• only和not无法出现在同一条媒体查询语句的开头。

实例

@media not  speech, only all and (min-width:220px) and (max-width:2000px), not all and (color:0){
    * {
        color: blue;
    }
    h1 {
        color: red;
    }
}

上述例子中，only用于版本兼容。剩余媒体查询描述的是：若不是speech或可见视口宽度>220px 且< 2000px的设备或非黑白的设备会应用该css样式。

使用link等HTML标签和@import实现媒体查询

之前的文章稍微有提到过。link标签、style标签是有一个media属性的。该属性其实就是用来做媒体查询的。link标签的基本属性还有@import的url()后面跟的内容，也是用于媒体查询的。@import

写法规则和css中的媒体查询的规则一样，功能也一样。

注意

即使媒体查询返回 false，带有媒体查询的<link>标记的样式表仍将下载。但是，除非查询结果变为 true，否则其内容将不适用。

使用编程方法测试媒体查询

如何使用js进行媒体查询

通过MediaQueryList接口以及他的方法实现的。创建了 MediaQueryList 对象之后，就可以通过它来检查查询结果，或者设置事件监听器，在查询结果发生变化时自动接收到通知。

如何创建MediaQueryList接口【window.matchMedia】

使用window.matchMedia方法。

该方法返回一个新的MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。

返回的MediaQueryList 可被用于判定Document是否匹配媒体查询，或者监控一个document 来判定它匹配了或者停止匹配了此媒体查询。

window.matchMedia的参数

一个字符串，字符串格式就是css中媒体查询的格式，表示要监控的媒体查询。

如何在媒体查询符合时立即执行回调

当我们创建了MediaQueryList 对象之后，我们可以监听他的change事件，该事件会在媒体查询结果发生改变时【true变为false，false变为true】触发事件回调。

MediaQueryList 对象实例的属性

• matches属性：该属性只读，且类型为Boolean，表示当前环境是否符合媒体查询列表。
• media属性：该属性只读，类型为字符串，表示要查询的媒体查询列表的字符串形式