媒体查询可以看成是浏览器提供的获取⽤户系统参数和设置的接⼝。目前，媒体查询应用最多的就是响应式布局的开发。

prefers-color-scheme 深浅主题

  1. @media (prefers-color-scheme: light) { 
  2.   .article {  
  3.     background:#fff; 
  4.     color: #000;  
  5.   } 
  6. } 
  7. @media (prefers-color-scheme: dark) { 
  8.   .article {  
  9.     background:#000;  
  10.     color: white;  
  11.   } 
  12. }

prefers-reduced-motion 动画减弱

prefers-reduction-motion 用于检测用户的系统是否被开启了动画减弱功能。

no-preference
用户未修改系统动画相关特性。

reduce
这个值意味着用户修改了系统设置，将动画效果最小化，最好所有的不必要的移动都能被移除。

  1. @media (prefers-reduced-motion: reduce) {
  2.   html:focus-within {
  3.     scroll-behavior: auto;
  4.   }
  5.   *,
  6.   *::before,
  7.   *::after {
  8.     animation-duration: 0.01ms !important;
  9.     animation-iteration-count: 1 !important;
  10.     transition-duration: 0.01ms !important;
  11.     scroll-behavior: auto !important;
  12.   }
  13. }

any-hover 与 hover 设备是否⽀持悬停效果

  1. @media (any-hover: hover) {
  2.   /* ⽀持悬停 */
  3. }
  4. @media (any-hover: none) {
  5.   /* 不⽀持悬停 */
  6. }
  1. @media (hover: hover) {
  2.   /* 主输⼊装置⽀持悬停 */
  3. }
  4. @media (hover: none) {
  5.   /* 主输⼊装置不⽀持悬停 */
  6. }

any-pointer 与 pointer 设备是否可以精确点击

  1. @media (any-pointer: none) {
  2.   /* 不⽀持点击 */
  3. }
  4. @media (any-pointer: coarse) {
  5.   /* ⾄少⼀个装置点击不精准 */
  6. }
  7. @media (any-pointer: fine) {
  8.   /* 有装置点击很精准 */
  9. }
  1. @media (pointer: none) {
  2.   /* 主输⼊装置点击不可⽤ */
  3. }
  4. @media (pointer: coarse) {
  5.   /* 主输⼊装置点击不精准 */
  6. }
  7. @media (pointer: fine) {
  8.   /* 主输⼊装置点击精准 */
  9. }

在 HTML 和 JavaScript 中也可以使用媒体查询

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

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

使用媒体查询控制图像资源的加载

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

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

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

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