Question

我的问题是，我偏爱的颜色样式样式仅适用于Firefox，不适用于Chrome。

这里是代码示例。现在，我认为无论出于何种原因，这可能都是某些HTML的问题。

@media (prefers-color-scheme: dark) {
  body {
    background-color: red;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <h1>test</h1>
  <div style="padding: 50px">asdufaisudfoaisdfoiausd</div>
</body>

</html>

现在，我在一个完全不同的文件中对此进行测试，然后再次在Firefox中运行，但在Chrome中不运行。有人有任何理由为何以及如何解决此问题吗？

Answer 1

Chrome仅从2019年7月30日（从发布本文起算起5天）发布的Chrome版本76开始，对 prefers-color-scheme 的支持。将您的Chrome更新到最新版本将正确显示prefers-color-scheme，以显示您的代码。

您可以通过单击右上角的三个点，然后单击帮助，然后单击About Google Chrome来更新Chrome。这会通知您您当前的Chrome版本，如果您没有最新版本，则会提示自动更新：

您可以在 CanIUse 中查看对prefers-color-scheme的支持，这表明Edge，Firefox，Chrome和Safari在各自最新的版本下都支持prefers-color-scheme ：

要检查您的浏览器是否支持prefers-color-scheme，以下代码段在深色主题下为红色，在浅色主题下为蓝色，如果您的浏览器不支持prefers-color-scheme，则为白色：

@media (prefers-color-scheme: dark) {
  html {
    background-color: red;
  }
}

@media (prefers-color-scheme: light) {
  html {
    background-color: blue;
  }
}

CSS Preferreds-color-scheme适用于Firefox，但不适用于Chrome问题

1 个答案: