手机网页自适应深色模式适配
1. 使用媒体查询 在CSS中，可以使用@media查询来检测浏览器的颜色模式，并在需要的情况下应用不同的样式。例如，以下代码段在日间模式下将文本颜色设置为黑色，在深色模式下将文本颜色设置为白色： @media (prefers-color-scheme: light) { body { color: black; } } @media (prefers-color-scheme: dark) { body { color: white; } } 在此示例中，我们使用prefers-color-scheme媒体查询，它检测浏览器的默认颜色方案，并根据需要应用样式。 2. 使用CSS变量 另一种方法是使用CSS变量来管理颜色，然后在媒体查询中更改变量的值。在元素中定义CSS变量： :root { --text-color: black; } 在CSS样式中，直接使用变量： p { color: var(--text-color); } 然后，可以在媒体查询中更改变量值： @media (prefers-color-scheme: dark) { :root { --text-color: white; } } 这意味着在深色模式下，--text-color变量将指向白色而不是黑色。 3. 使用JavaScript 使用JavaScript，可以检测浏览器颜色模式，并动态更改CSS样式。以下是JavaScript的示例代码： const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; if (prefersDark) { document.body.classList.add('dark-mode'); } else { document.body.classList.remove('dark-mode'); } 在此示例中，我们使用matchMedia来检测浏览器颜色模式，并在需要时添加或删除具有.dark-mode类的元素。然后，可以在CSS样式表中定义此类的样式，以在深色模式下执行所需的更改。