超越断点：在 CSS 中利用用户偏好媒体查询

如果您构建网站或应用程序，您很可能会使用媒体查询。这些方便的 CSS 工具允许您根据设备的大小调整布局。它们是响应式设计的关键部分。

您可以根据设备的宽度、长宽比、方向等进行查询。这些都允许您根据所使用的设备微调布局。

您可能不知道还有其他可用的媒体查询，可让您根据用户的偏好而不是设备大小和方向来定制网站或应用程序。

用户偏好媒体查询

有几种处理用户偏好的媒体查询。您可以使用这些来微调应用程序的用户体验。

具有首选颜色方案的自动深色模式

如今，深色模式无处不在。似乎每个网站现在都有太阳/月亮切换按钮来在浅色模式和深色模式之间切换。您可以更进一步，使用偏好颜色方案媒体查询来自动确定用户的设备是否使用浅色或深色模式。

它的工作原理如下：像平常一样为灯光模式定义 CSS 样式。然后添加媒体查询prefers-color-scheme: dark。在那里，添加覆盖您的灯光模式颜色的 CSS 规则：

.content {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  .content {
    background-color: black;
    color: white;
  }
}

提示：使用 CSS 变量创建主题

为了让生活变得更轻松，您可以在主题（一组 CSS 变量）中定义所有颜色。然后在你的prefers-color-scheme: dark块中，你只需要重新定义变量，而不是重新添加你的CSS选择器和规则：

--main-background: white;
--text-color: black;

.content {
  background-color: var(--main-background);
  color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  --main-background: black;
  --text-color: white;
}

使用prefers-reduced-motion 淡化动画

动画可以增强应用的体验，但对于有视力或前庭问题的用户来说，动画可能会有些困难。为了帮助这些用户，某些设备和操作系统在用户首选项中提供了减少运动的选项。

您可以使用prefers-reduced-motion 媒体查询来检测何时为用户设备启用此类选项。然后，您可以使用强度较低的替代动画（或完全关闭它们）。

这是使用prefers-reduced-motion 关闭动画的示例。

.content {
  animation: my-awesome-animation 250ms ease-in-out;
}

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

需要注意的一件事：如果您关闭这样的动画，请确保您没有任何依赖于animationend事件的代码。当您将动画设置为无时，如上所示，该事件将永远不会被触发。

请记住，当喜欢-reduced-motion：减少匹配时，您不必关闭动画！假设您有一个精美的显示动画，其中元素弹回视图中。当用户想要减少运动时，您可以更改此设置，使其成为简单的淡入动画。

自适应对比与偏好对比

一些视力困难的用户可能在其设备上启用了增强对比度。您可以使用偏好对比媒体查询来处理此类情况。

如果此媒体查询匹配，您可以调整对比度以使这些用户更容易看到内容。

.content {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  .content {
    background-color: black;
    color: white;
  }
}

使用 JavaScript 检查媒体查询

假设您正在使用 JavaScript 制作动画 - 例如，您可能正在使用 Web Animations API。由于这些动画未在 CSS 中定义，因此您无法使用prefers-reduced-motion 媒体查询关闭它们。

你可以吗？

是的！您可以使用 window.matchMedia 方法来评估来自 JavaScript 的媒体查询。媒体查询作为参数传递，该方法返回称为 MediaQueryList 的内容。

这个对象有一个 matches 属性，它是一个布尔值，指示此媒体查询当前是否匹配。根据该值，您可以决定是否制作动画。

下面是一个简单的示例，展示了如何使用 window.matchMedia 在 DOM 元素上有条件地调用 animate：

--main-background: white;
--text-color: black;

.content {
  background-color: var(--main-background);
  color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  --main-background: black;
  --text-color: white;
}

对变化做出反应

MediaQueryList 甚至有一个更改事件，如果条件发生变化并且媒体查询不再适用，则会触发该事件。

假设您有一些只想在大显示器上运行的 JavaScript 代码。如果用户的屏幕尺寸较小，则需要跳过此代码。您可以通过使用最大宽度查询或类似的方式调用 window.matchMedia 来完成此操作。

假设稍后用户调整了窗口大小，现在您想要运行大屏幕特定的 JavaScript 代码。只需监听 MediaQueryList 的更改事件，您就可以检查该事件的 matches 属性以查看新值是什么。

概括

这些媒体查询可以帮助您更好地个性化您的网站或应用程序中的用户体验。您可以自动应用深色配色方案，甚至可以根据用户偏好微调动画和对比度。它们还有助于提高可访问性，这始终是一个胜利。

它仍处于实验阶段，但您也可以关注prefers-reduced-data 查询，该查询将指示用户的设备是否有使用较少数据的要求。这可用于提供使用较少数据的替代内容。例如，您可以跳过非必要的图像（或使用较低分辨率的版本）。

以上是超越断点：在 CSS 中利用用户偏好媒体查询的详细内容。更多信息请关注PHP中文网其他相关文章！