在 CSS 和 JavaScript 中检测媒体查询支持

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您的旅程的每个阶段提供云产品。 从 免费试用 200 美元积分开始!

您不能只执行 @media (prefers-reduced-data: no-preference) ,因为, 正如 Kilian Valkhof 所说

[…] 如果没有支持(因为浏览器不理解媒体查询)或者如果它  支持的但用户想要保留数据,这将是错误的。

通常 @supports 是 CSS 中的工具,但它不适用于 @media 查询。 不过,事实证明有一个解决方案。

@media not all and (prefers-reduced-data), (prefers-reduced-data) {
  /* ... */
}

这是一个关于媒体查询语法以及浏览器如何评估这些事物的复杂逻辑谜题。 很高兴您最终能够在一个表达式中处理不支持的回退情况。

直接链接 →