乍一想，好像媒介查询很简单，已经一直在用的东西，还有什么好学的。看了大佬的文章才知道。还有这么多好玩的东西可以学可以用！

我以为我所熟知的：

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

就这？

大佬教我的：

一、媒介查询的更多打开方式

媒介查询不只是能用在CSS代码块中，还可以用在引入CSS的链接中，甚至是JavaScript中。

例如：

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

再例如：

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

在JavaScript中，提供了matchMedia方法

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

注意参数中的引号与括号方式

二、关于交互操作的媒介查询

设备是否⽀持悬停效果

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

设备是否可以精确点击

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

三、设备的暗黑/深色模式查询

目前移动端很热门很流行的东西

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

四、⾼对⽐度模式

基本上所有的操作系统中都会有这样一个设置，主要是方便弱视，散光等群体，以及在强光场景下方便看清内容

@media (prefers-contrast: more) {
  /* ⽤户喜欢⾼对⽐度 */
}
@media (prefers-contrast: less) {
  /* ⽤户喜欢对⽐度 */
}

本文主要学习自：https://www.zhangxinxu.com/wordpress/2021/12/css-meida-user-experience/