①媒体查询可以看成是浏览器提供的获取⽤户系统参数和设置的接⼝；
②在 HTML 和 JavaScript 中也是可以使用媒体查询；
③注意，在 JS 应用中，如果参数是 CSS 声明（也就是出现了冒号），外面需要有个括号，否则语法不正确；
④any-hover 与 hover：表示设备是否⽀持悬停效果；
@media (any-hover: hover) { /* ⽀持悬停 /}；
@media (any-hover: none) { / 不⽀持悬停 /}；
@media (hover: hover) { / 主输⼊装置⽀持悬停 /}；
@media (hover: none) {/ 主输⼊装置不⽀持悬停 /}；
⑤any-pointer 与 pointer：表示设备是否可以精确点击；
@media (any-pointer: none) { / 不⽀持点击 /}；
@media (any-pointer: coarse) {/ ⾄少⼀个装置点击不精准 /}；
@media (any-pointer: fine) {/ 有装置点击很精准 /}；
@media (pointer: none) { / 主输⼊装置点击不可⽤ /}；
@media (pointer: coarse) {/ 主输⼊装置点击不精准 /}；
@media (pointer: fine) {/ 主输⼊装置点击精准 /}；
⑥用来判断用户是否在系统层面设置了深色模式，媒体查询属性是 prefers-color-scheme；
⑦高对比度模式：此媒体查询属性名称是 prefers-contrast；
@media (prefers-contrast: more) {/ ⽤户喜欢⾼对⽐度 /}；
@media (prefers-contrast: less) {/ ⽤户喜欢对⽐度 /}；
⑧减弱动画的查询属性是 prefers-reduced-motion，
@media (prefers-reduced-motion: reduce) {/ ⽤户希望减弱动画 */}；
（参考：www.zhangxinxu.com/wordpress/2…
