「css」@media的hover&pointer检测

[@media](#) 媒体查询：

参考文章：张鑫旭：https://www.zhangxinxu.com/wordpress/2020/01/css-any-hover-media/

any-hover：测试是否有任意可用的输入装置可以hover悬停在元素上

• none：没有什么输入装置可以实现hover悬停，或者没有可以指向的输入装置。

• hover：一个或多个输入装置可以触发元素的hover悬停交互。

  button {
  background-color: #fff;
  }
  button:active {
  background-color: #f0f0f0;
  }
  @media (any-hover: hover) {
  button:hover {
  background-color: #f5f5f5;
  }
  }

  hover：测试主输入装置可以hover悬停在元素上（键盘等外接设备无法测算）

• none：主输入装置根本无法悬停或无法方便地悬停（例如，许多移动设备在用户执行不方便的长点击来模拟悬停），或者没有主指向输入装置。

• hover：主输入装置可以触发元素的hover悬停交互。

  any-pointer：测试是否有任意可用的输入装置可以非常方便的进行点击操作

• none：没有可用的点击设备。

• coarse：至少一个设备的点击不是很精确。例如手机移动端，用罗永浩的话讲，都是使用萝卜一样粗的手机进行操作，就属于点击不精确。

• fine：有设备可以让点击很精准。例如有鼠标的桌面电脑浏览器。

  pointer：测试主输入装置是否可以非常方便的进行点击操作

• none：没有可用的点击设备。

• coarse：至少一个设备的点击不是很精确。例如手机移动端，用罗永浩的话讲，都是使用萝卜一样粗的手机进行操作，就属于点击不精确。
• fine：有设备可以让点击很精准。例如有鼠标的桌面电脑浏览器。