您应该关注的两个媒体查询

CSS 是一种强大的语言。“媒体查询”功能让您可以访问用户的情况、设备功能和偏好设置。

最后一个功能——显示偏好设置——非常强大。您可以根据用户希望的内容呈现方式做出反应！

这篇短文将向您介绍两个新的媒体查询，它们将有助于使您的网站变得更好。

喜欢减少运动

有些用户对冗长而跳跃的动画很敏感，而有些用户则完全不喜欢。无论如何，总有一种快捷的方法可以满足他们的需求。

只需将以下代码添加到您的 CSS 文件即可：

@media (prefers-reduced-motion: reduce) {
  .my-animated-thing { animation: none; }
}

每当偏好减少运动 UI 的用户进入您的页面时，您可以为他们关闭特别干扰或持续的动画。

如果您想为您的网站添加一条综合规则，您可以按照以下方式处理所有元素：

@media (prefers-reduced-motion: reduce) {
  * { 
    animation: none;
    transition: none;
  }
}

不过，你可能不想这么做——毕竟，取消所有过渡效果可能并非你想要的。如果你有时间和预算，可以仔细检查所有添加动效的类，并考虑为它们添加一个减少动效的媒体查询。

偏好配色方案

Android、iOS、OSX 和 Windows 现已支持选择暗黑模式——即常规用户界面的暗黑版本。如果您的应用也能支持此功能，那岂不是很酷？

CSS 再次通过prefers-color-scheme媒体查询来拯救我们：

@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #eee;
  }
}

如果您使用 CSS 动态属性（也称为 CSS 变量），您只需一次性更改整个配色方案即可为您的网站增添超能力：

@media (prefers-color-scheme: dark) {
  :root {
    --primary-background-color: #111;
    --primary-text-color: #eee;
    --contrast-background-color: #eee;
    --contrast-text-color: #111;
  }
}

如果您愿意，还可以深入了解更多媒体查询。您可以在这里查看所有内容。

您最喜欢的媒体查询技巧是什么？