媒体查询

媒体查询可以看成是浏览器提供的获取⽤户系统参数和设置的接⼝。

需要注意的是，不少前端开发有这么个认知误区，就是认为媒体查询只能用在 CSS 中，就像下面这样：

@media (max-width: 480px) {
    /* css here */
}

实际上不是的，我们在 HTML 和 JavaScript 中也是可以使用媒体查询的。

例如，可以单独把移动端的 CSS 单独提出来：

<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="mobile.css" media="(max-width: 480px)">

使用媒体查询控制图像资源的加载（想了解更多 <picture> 元素知识，可访问这篇文章）：

<picture>
  <source srcset="rect.png" media="(min-width: 480px)">
  <img src="square.png">
</picture>

如果是在 JS 中，可以使用 matchMedia 这个 API 方法判断是不是匹配对应的媒体查询：

if (matchMedia('(max-width: 480px)').matches) {
    // js here
}

注意，在 JS 应用中，如果参数是 CSS 声明（也就是出现了冒号），外面需要有个括号，否则语法不正确，也就是 matchMedia('max-width:480px') 是无效的。

目前，媒体查询应用最多的就是响应式布局的开发。

实际上，meida query 媒体查询除了实现应式开发，我们还可以借助帮助我们提升⽤户体验，这是很多前端开发所不知道的。

Egoist