超越断点：在 CSS 中利用用户偏好媒体查询-js教程-PHP中文网

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

DDD

发布： 2024-10-27 05:29:03

原创

717 人浏览过

Beyond breakpoints: Leveraging user preference media queries in 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;
}

登录后复制