一、简介

媒体查询是一种提供给开发者针对不同设备进行定制化开发的一个接口。通过它，我们可以根据设备类型(比如屏幕设备、打印机设备)或特定的特性(比如屏幕的宽度)来修改或适配页面。

二、使用方式

2.1 目标

需求：在宽度小于800时，显示背景色红色

2.2 @import

通过@media和@import使用不同的CSS规则

新建demo.css文件，样式如下：

body {
  background-color: red;
}

在demo.html中引入css，并设置相关媒体特性：

<style>
  @import url(./demo.css) (max-width: 800px);
</style>

其中(max-width: 800px)就是我们设置的条件，必须以()包裹，其支持的类型下面会单独介绍。

2.3 link、source等

demo.html中通过link引入css文件，如下：

<link rel="stylesheet" media="(max-width: 800px)" href="./demo.css">

2.4 @media

在demo.html中style代码如下：

<style>
  @media (max-width: 800px) {
    body {
      background-color: aqua;
    }
  }
</style>

目前，比较常用的是用该方式来使用不同的CSS规则，具体下面介绍。

2.5 其他

另外，可以通过window.matchMedia()和MediaQueryList.addListener()方法来测试和监控媒体状态

三、媒体类型(Media Types)

3.1 简介

在使用媒体查询时，必须指定要使用的媒体类型

媒体类型是可选的，默认会是all类型

3.2 常见的媒体类型值

• all：适用于所有设备
• print：适用于在打印预览模式下屏幕上查看的分页材料和资料
• screen：主要用于屏幕
• speech：主要用于语音合成器

3.3 已废弃媒体类型

• CSS 2.1和Media Queries 3定义了一些额外的媒体类型(tty、tv、projection、handheld、braille、embossed以及aural)
• 上述媒体类型在Media Queries 4中已经被废弃，并且不应该再被使用
• aural类型被替换为具有相似效果的speech

四、媒体特性(Media Features)

4.1 简介

媒体特性(Media Features)描述了浏览器、输出设备或预览环境的具体特性

• 通常会将媒体特性描述为一个表达式
• 每条媒体特性表达式必须用括号括起来

4.2 常见媒体特性简介

五、媒体查询 - 逻辑操作符(Logical Operators)

5.1 简介

媒体查询的表达式最终会获得一个Boolean值，也就是true或false

• 如果为true，那么就会生效
• 如果为false，那么就不会生效

5.2 逻辑运算符

如果有多个条件，我们可以通过逻辑操作符联合复杂的媒体查询

• and：用于将多个媒体查询规则组合成单条媒体查询
• not：用于否定媒体查询，如果不满足这个条件，则返回true，否则返回false
• only：仅在整个查询匹配时才用于应用样式
• ，(逗号)：用于将多个媒体查询合并为一个规则

5.3 案例

需求：在屏幕宽度320-414时，展示红色，在415-800时展示绿色，当大于800时，展示蓝色。
代码如下：

<style>
  @media (min-width: 320px) and (max-width: 414px) {
    body {
      background-color: red;
    }
  }

  @media (min-width: 415px) and (max-width: 800px) {
    body {
      background-color: green;
    }
  }

  @media (min-width: 801px) {
    body {
      background-color: blue;
    }
  }
</style>

上述代码可以简写为：

<style>
  @media (max-width: 414px) {
    body {
      background-color: red;
    }
  }

  @media (max-width: 800px) {
    body {
      background-color: green;
    }
  }

  @media (min-width: 801px) {
    body {
      background-color: blue;
    }
  }
</style>