媒体查询是个啥？ What hell is that!? 🔥

媒体查询是浏览器提供的获取⽤户系统参数和设置的 interface。

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

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

@media (max-width: 1024px) {
  balabala....
}
@media (max-width: 480px) {
  balabala....
}
css

但实际上你可以：

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

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

下面介绍几种其他不太常见的 👌

dark / light

用来判断用户是否在系统层面设置了深色模式，媒体查询属性是 prefers-color-scheme，用法示意：

// 深⾊模式
@media (prefers-color-scheme: dark) {
}
// 浅⾊模式
@media (prefers-color-scheme: light) {
}
css

当用户在系统层面设置了暗黑模式后，好的用户体验就是我们的 Web 产品自动追随，容易给用户惊喜。

any-pointer & pointer

表示设备是否可以精确点击？

@media (any-pointer: none) {
  /* 不⽀持点击 */
}
@media (any-pointer: coarse) {
  /* ⾄少⼀个装置点击不精准 */
}
@media (any-pointer: fine) {
  /* 有装置点击很精准 */
}
css

@media (pointer: none) {
  /* 主输⼊装置点击不可⽤ */
}
@media (pointer: coarse) {
  /* 主输⼊装置点击不精准 */
}
@media (pointer: fine) {
  /* 主输⼊装置点击精准 */
}
css

any-hover & hover

表示设备是否⽀持悬停效果？

现在响应式的设计网站越来越多，触摸屏是无法实现hover的效果的。所以不做一些特殊的处理，难免会有很大的偏差。 例如一些导航栏的悬浮，或是因为移动端屏幕过小，加大触发面积等。

@media (any-hover: hover) {
  /* ⽀持悬停 */
}
@media (any-hover: none) {
  /* 不⽀持悬停 */
}
css

@media (hover: hover) {
  /* 主输⼊装置⽀持悬停 */
}
@media (hover: none) {
  /* 主输⼊装置不⽀持悬停 */
}
css